redux-session-manager-middleware
v2.1.0
Published
Middleware for managing state in redux client-side apps
Downloads
14
Maintainers
Readme
Redux Session Manager Middleware
This middleware will serialize your redux store to sessionStorage for your client-side only app, to allow you to populate the redux store with a preloaded state on refresh. (SSR apps would handle this differently). How to restore the state is described here.
Installation
npm i redux-session-manager-middleware
Usage
Apply this middleware similarly to other redux middleware. The only difference being that this middleware requires an options argument
import { createStore } from 'redux';
import sessionManager from 'redux-session-manager-middleware'
const options = {
name : "myApplication",
exclude : [
"myReducer1",
[
"myReducer2", [
'excludedProp1'
['keys', 'to', 'excluded', 'property2']
]
]
],
ignoreActions: [ ACTION_1, ACTION_2 ]
};
const store = createStore(reducers, [ sessionManager(options)])
ImmutableJS
If you are using ImmutableJS for your redux store, you can just change the import to
import sessionManager from 'redux-session-manager-middleware/dist/immutable';
IMPORTANT This expects ImmutableJS v4.x+. Currently the 4.x branch is on release-candidate status. This branch
is needed because it provides Map.deleteIn
that this middleware leverages.
Options
| Property | Type | Required? | Description | |:---|:---|:---|:--- name | string | yes | This will be the key in sessionStorage for the serialized state | ignoreActions | array | no | An array of action types that will not execute this middleware | exclude | array[string|array] | no | An array containing either a string representing the reducer to exclude, or an array of [reducerName, keyPaths] where keyPaths can be either a string for a direct property of the reducer, or an array representing the keyPath to the property to be excluded.
Restoring state
State restoration upon refresh, can be handled via middleware, but I'd recommend just populating the store with a preloadedState instead, so that unnecessary actions to achieve this result aren't needed.
This can simply be achieved by pulling out the state from sessionStorage and passing it to createStore
Ex:
const restoredState = JSON.parse(sessionStorage.getItem('myReducer');
You may need to provide a reviver
function to JSON.parse
if you had custom classes. Documentation on reviver
can be found here
FAQ
Q: My state isn't being saved after an action dispatches
A: Since this is middleware, it is executed before the reducer receives the action to update the state. So this serialization is essentially 1 action behind. I've experimented with ugly hacks to get the modified state after the reducer but none that are worth shipping. If anyone has any ideas feel free to contribute!