React Store Provider

Another way to manage global state in any given component tree using providers and hooks.

     

• npm: npm react-store-provider
• yarn: yarn add react-store-provider

Getting Started

You must setup your store exporting initialState, actions, reducer – initialState is the initial state of the store and should be a standard object, reducer is a standard Redux-esque reducer function for manipulating the state, and the actions can either be a standard object or a function that binds the dispatch.

export const initialState = { label: 'foo' };

const actionTypes = {
    update: Symbol('update')
}

export const actions = dispatch => ({
    update: payload => dispatch({ type: actionTypes.update, payload }),
});

export function reducer(state, action) {
    switch (action.type) {
        case actionTypes.update:
            return { ...state, label: action.payload };
        default:
            return state;
    }
}

Once your store is all setup use Store to initialise it and then getStore to get a reference to the hook. You must have the StoreProvider in your tree before using the useStore hook.

import { Store } from 'react-store-provider';
import * as store from './foobar-store';

export default function Parent({ children }) {
    return (
        <Store name="foobar" store={store}>
            {children}
        </Store>
    );
}

After adding the StoreProvider to your tree, you can happily use the useStore in all child components. When you dispatch any actions from your child components and the state is updated, the state will be updated in all components that utilise the state from the provider.

import { useStore } from 'react-store-provider';

export default function Child() {
    const [store, actions] = useStore('foobar');

    return (
        <div onClick={() => actions.update('bar')}>
            {store.label}
        </div>
    );
}