rx-basic-store

A simple reactive store for state management using RxJs. Can be used in React but will also work with other frameworks.

Created to seperate state management from the UI components without a lot of boilerplate code.

Inspired by this blog and the names of the events are inspired by ngxs

Examples

Here a demo and the code

create

// creates a new store
const store = createStore<StateModel>(initialState, null, true);

In reactJs the store can be mapped to the component state like this:

export function MyComponent() {
  const [state, setState] = useState(store.currentState());

  useEffect(() => {
    const subs = store.subscribe(setState);
    store.dispatch(new LoadAction());
    return () => subs.unsubscribe();
  }, []);

actions

Create an action that implements StoreAction<T, M>

export class LoadAction implements StoreAction<StateModel, never> {
    type = "LOAD";
    async execute(ctx: StateContext<StateModel>): Promise<StateModel> {
        if (ctx.getState().users.length === 0) {
            ctx.patchState({ loading: true });
            const users = await (await axios.get<ApiResponse>('https://randomuser.me/api/?results=20')).data.results;
            return ctx.patchState({ loading: false, users });
        }
    }
}

API

Store:

• initialState: T: The initial state
• context (name: string, dependency: unknown }[]): can be used to inject context like: History etc. these context dependencies can be accessed by ctx: ctx.getContext<History>('history')
• actionCallback: (action: StoreAction<T, unknown>) => void = () => { }, devTools = false) can be used capture all action. For example to log all actions to the console or database.
• devTools (bool): indicates if the events should be send to redux devTools

ctx: StateContext

• getContext(name: string): gets the context that is added while creating the store. E.g. use to access History
• dispatch: (action: StoreAction<T, unknown>) => Promise<void | T>: dispatches an action and return a promise, optional with the state, when the action is finished.
• getState: gets the current state.
• setState: set the entire new state.
• patchState: set only the changed properties of the state, these will be merged with the current state.