A custom React Hook that persist state from useReducer
use-persisted-reducer
is not a hook itself, but is a factory that accepts a storage key
and an optional storage provider (default = localStorage
) and returns a hook
that you can use as a direct replacement for useReducer
.
Persists the state to localStorage
To use use-persisted-reducer
, you must use [email protected]
or greater which includes Hooks.
$ npm i use-persisted-reducer --save
or
$ yarn add use-persisted-reducer
import React from 'react';
import createPersistedReducer from 'use-persisted-reducer';
const usePersistedReducer = createPersistedReducer('state');
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = usePersistedReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
}
export default Counter;
You can also pass in your own storage provider
import React from 'react';
import createPersistedReducer from 'use-persisted-reducer';
// defaults to globalThis.localStorage
const usePersistedReducer = createPersistedReducer('state', globalThis.sessionStorage);
- Fork it!
- Create your feature branch:
git checkout -b feature-name
- Commit your changes:
git commit -am 'Some commit message'
- Push to the branch:
git push origin feature-name
- Submit a pull request ๐๐
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter?
Don't forget to follow me on twitter!
Thanks! John Ayeni.
MIT Licensed