Use-persisted-reducer NPM

use-persisted-reducer

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.

Features

Persists the state to localStorage

Requirement

To use use-persisted-reducer, you must use react@16.8.0 or greater which includes Hooks.

Installation

$ npm i use-persisted-reducer --save

$ yarn add use-persisted-reducer

Example

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

Example

import React from 'react';
import createPersistedReducer from 'use-persisted-reducer';

// defaults to globalThis.localStorage
const usePersistedReducer = createPersistedReducer('state', globalThis.sessionStorage);