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

``javascript
import useReducerPersisted from 'use-reducer-persisted';
`

And then easily use it like useReducer , Just some more arguments :smile:

`javascript
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

`javascript
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}
dispatch({type: 'decrement'})}>-
dispatch({type: 'increment'})}>+

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

$3

MIT Licensed