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