redux-localstorage-slicer

Custom slicer for redux-localstorage that allows reducers to define their own persistence configuration.

Usage no npm install needed!

<script type="module">
  import reduxLocalstorageSlicer from 'https://cdn.skypack.dev/redux-localstorage-slicer';
</script>

README

redux-localstorage-slicer

Custom slicer for redux-localstorage that allows reducers to define their own persistence configuration.

Usage with redux-localstorage

import compose from 'redux';
import persistState from 'redux-localstorage';
import persistSlicer from 'redux-localstorage-slicer';


const createPersistentStore = compose(
  persistState(null, {
    slicer: persistSlicer()
  })
)

Usage with Redux reducers

myReducer.js

Setting state.__persist to true will persist the whole substate managed by the reducer.

// Both state.foo and state.bar will be persisted.
const initialState = {
  __persist: true,
  foo: 'foo',
  bar: 'bar',
};

Setting state.__persist to a transformer function or array of keys will allow the reducer to further slice the substate it manages.

// Only state.foo will be persisted.
const initialState = {
  __persist: state => state.foo,
  foo: 'foo',
  bar: 'bar',
};
// Only state.bar will be persisted.
const initialState = {
  __persist: ['bar'],
  foo: 'foo',
  bar: 'bar',
};

localStorage Versioning

We can pass a version number into persistSlicer. Whenever the slicer detects that we have set a number and that we have updated that number, then the slicer will go ahead to invalidate localStorage.redux.

const REDUX_LOCALSTORAGE_VERSION = 1;

persistState(null {
  slicer: persistSlicer(REDUX_LOCALSTORAGE_VERSION)
});