README
use-reducer-persisted
Easily Persist your state created by useReducer into ( localStorage | sessionStorage | cookie ) and keep it sync in different tabs/windows
Features :boom::fire:
1- Three different storage
Store your state in 3 different storage such as- localStorage
- sessionStorage
- cookie :flushed:
2- Synced State :
Your state will be synced at all Window/Tap for a same browser ( even in cookie )
Requirement
To use use-reducer-persisted
, you must use react@16.8.0
or greater which includes Hooks.
Using
first import it
import useReducerPersisted from 'use-reducer-persisted';
And then easily use it like useReducer , Just some more arguments :smile:
const [state, dispatch] = useReducerPersisted(key, reducer, init, storage, options);
key : your storage key like "userInfo" ( Required )
reducer : your reducer ( Required )
init : your initial state as value or callback function
storage : specify storage type as string ( "local"
for localStorage, "session"
for sessionStorage , "cookie"
for cookie )
options : all options for your cookie and syncing time interval for cookie :
- step : interval time in milisecond for syncing state from cookie on other tab/window
- other option of cookie based on "universal-cookie"
Example
import useReducerPersisted from 'use-reducer-persisted';
import reducer from './path/to/yourReducer';
function Counter() {
const [state, dispatch] = useReducerPersisted('counter', reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
Taken from the basic example of React useReducer
The state created by this hook is shared for this App on other tabs or windows
Even when you close the window completely and open it again your state is persisted
Licence
MIT Licensed