use-reducer-persisted
v1.2.1
Published
useReducer hook with persistence in storage
Downloads
502
Maintainers
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:
- localStorage
- sessionStorage
- cookie :flushed:
Requirement
To use use-reducer-persisted
, you must use [email protected]
or greater which includes Hooks.
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"
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