@cuban-engineer/redux-storage-middleware
v0.1.9
Published
Redux middleware for synchronizing store state with browser storages
Downloads
3
Readme
What makes the library better?
Installation
Using npm:
npm i --save @cuban-engineer/redux-storage-middleware
Usage
If you are using ES modules:
import reduxStorageMiddleware from '@cuban-engineer/redux-storage-middleware';
Apply middleware to Redux:
import { applyMiddleware, createStore } from 'redux';
import reduxStorageMiddleware from '@cuban-engineer/redux-storage-middleware';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(reduxStorageMiddleware)
);
Describe what needs to be saved in your Redux actions
For simple Redux states
Suppose you already have this simple action for changing the logged user token in your application for sending requests to an API.
export const changeUserToken = userToken =>
({
type: 'CHANGE_USER_TOKEN',
userToken
});
Simply by adding the sync
property which is an array of simple json objects that @cuban-engineer/redux-storage-middleware
understands you can define what and where to save after the Reducer handle your action.
export const changeUserToken = userToken =>
({
type: 'CHANGE_USER_TOKEN',
userToken,
sync: [
{
name: 'userToken',
where: ['session', 'local'],
hierarchy: ['user'],
},
],
});
Sync property Example
sync: [
{
// Key in which will be saved the data in the Browser storage.
// If is not defined the key will be the @name attribute.
key: 'token',
// Literal name of the object in the Redux State that wants to be saved to the Browser storage.
name: 'userToken',
// Array of string enumerating where to save the data in the Browser storage.
// Currently only Session and Local Storage. Cookies storage is coming son.
// If only want to save in a single place is also possible to define it as a simple string, like this:
// where: 'session'
// If not defined, saving will occur in the Session Storage.
where: ['session', 'local'],
// For more complex Stores, if using combineReducers for instance, the entire tree hierarchy for
// obtaining the object in the State can be defined in the hierarchy attribute.
// If only one level is needed to reach the desire object from the state, is also possible to define
// the attribute as a simple string, like this hierarchy: 'ui'.
// Example: state.user.userToken
hierarchy: ['user'],
},
]
License
@cuban-engineer/redux-storage-middleware is MIT-licensed.