Essential

❄️ Essential Redux Store

Essential is an opinited implementation of redux toolkit in the form of OOP. It is designed for the browser but can also work on nodeJs. This implementation is a vanilla implementation to work on all frameworks or node.

Table of contents

• Usage
• Installation

Usage

(Back to top)

Store is a singleton instance where you can use is as:

import { useStore } from '@websublime/essential';

const store = useStore();

Create a class that will be responsable for the partial state of your global state. This reducer class is extended from or base class.

import { EssentialReducer, createAction } from '@websublime/essential';

type MyReducerState = { count: number };
type MyReducerDispatchers = {increment(count: number): void, decrement(count: number): void};

const INCREMENT_ACTION = createAction<MyReducerState>('INCREMENT');
const DECREMENT_ACTION = createAction<MyReducerState>('DECREMENT');

class MyReducer extends EssentialReducer<MyReducerState, MyReducerDispatchers> {
  get initial(): MyReducerState {
    return { count: 0 };
  }

  get actions() {
    return [
      {action: INCREMENT_ACTION, reducer: this.incrementReducer.bind(this) },
      {action: DECREMENT_ACTION, reducer: this.decrementReducer.bind(this) }
    ];
  }

  get dispatchers(): MyReducerDispatchers {
    return {
      increment: this.incrementDispatcher.bind(this),
      decrement: this.decrementDispatcher.bind(this)
    };
  }

  private incrementReducer(state: MyReducerState, action: ReturnType<typeof INCREMENT_ACTION>) {
    state.count = state.count + action.payload.count

    return state;
  }

  private decrementReducer(state: MyReducerState, action: ReturnType<typeof DECREMENT_ACTION>) {
    state.count = state.count - action.payload.count

    return state;
  }

  private incrementDispatcher(count = 1) {
    const [first] = this.actions;

    this.dispatch(first.action({ count }));
  }

  private decrementDispatcher(count = 0) {
    const [_, last] = this.actions;

    this.dispatch(last.action({ count }));
  }
}

You can then register/build this reducer class in the store

const dispatchers = store.buildReducer<MyReducerState, MyReducerDispatchers, typeof MyReducer>(MyReducer, 'myreducer');

After being created the dispatchers object is returned and you can just dispatch any action you have defined on dispatchers property.

dispatchers.increment(1);

To be documented (more examples on tests like async, listeners).

Installation

(Back to top)

npm install @websublime/essential

Contributing

(Back to top)

Your contributions are always welcome! Please have a look at the contribution guidelines first. 🎉

Create branch, work on it and before submit run:

• git add .
• git commit -m "feat: title" -m "Description"
• yarn changeset
• git add .
• git commit --amend
• git push origin feat/... -f

License

(Back to top)

The MIT License (MIT) 2022 - Websublime. Please have a look at the LICENSE.md for more details.