Package Exports

rx-basic-store

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rx-basic-store) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 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 });
        }
    }
}