use-reducer-persisted

Easily Persist your state created by useReducer into ( localStorage | sessionStorage | cookie ) and keep it sync in different tabs/windows

Features 💥🔥

1- Three different storage

Store your state in 3 different storage such as

• localStorage
• sessionStorage
• cookie 😳

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 😄

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