Essential
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
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
npm install @websublime/essential
Contributing
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
The MIT License (MIT) 2022 - Websublime. Please have a look at the LICENSE.md for more details.