https://github.com/arojunior/redux-localstore
Synchronize Redux Store with localStorage
https://github.com/arojunior/redux-localstore
javascript localstorage redux sessionstorage
Last synced: 4 months ago
JSON representation
Synchronize Redux Store with localStorage
- Host: GitHub
- URL: https://github.com/arojunior/redux-localstore
- Owner: arojunior
- License: mit
- Created: 2017-05-02T20:27:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T14:35:21.000Z (almost 3 years ago)
- Last Synced: 2025-06-22T16:41:37.054Z (5 months ago)
- Topics: javascript, localstorage, redux, sessionstorage
- Language: JavaScript
- Size: 987 KB
- Stars: 40
- Watchers: 2
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Synchronize Redux Store with localStorage/sessionStorage
[](https://www.npmjs.com/package/redux-localstore) [](https://www.npmjs.com/package/redux-localstore) [](http://standardjs.com/)
Subscribe Redux Store and replicate to `localStorage`, so user will can refresh page and keep the App state
### Store example
Just import the **_default method_** (you can call storeSynchronize as the example above) from `'redux-localstore'` and pass store as parameter
```javascript
import { createStore, combineReducers } from 'redux';
import storeSynchronize from 'redux-localstore';
const combineReducer = combineReducers({
Auth,
Product
});
export const store = createStore(combineReducer);
storeSynchronize(store); // the default config synchronizes the whole store
```
### localStorage / sessionStorage
The default browser storage is the `localStorage` (persists until the **_browser_** is closed), but since version 0.3.0 you can change the default to `sessionStorage` (persists until the **_tab_** is closed).
```javascript
storeSynchronize(store, {
storage: 'sessionStorage'
});
```
### Blacklist
If you need to ignore some reducer, you can use the **blacklist** configuration:
```javascript
storeSynchronize(store, {
blacklist: ['Auth']
});
```
### Whitelist
If you want to sync just specific reducers, you can use the **whitelist** configuration:
```javascript
storeSynchronize(store, {
whitelist: ['Product']
});
```
### Reducer example
To populate the initalState from browser storage, import **_defineState_** method from `'redux-localstore'`, pass your `defaultState` as first parameter and the reducer key as second. (note that it's using currying)
```javascript
import { defineState } from 'redux-localstore';
const defaultState = {
data: null
};
const initialState = defineState(defaultState)('Product');
export default (state = initialState, action) => {
switch (action.type) {
case 'ACTION1':
return {
...state,
data: action.payload
};
case 'ACTION2':
return {
...state,
data: null
};
default:
return state;
}
};
```
### Getting local state
This method gets the persisted state. It shouldn't be actually necessary, since the state from your redux store is supposed to be the same.
```javascript
import { getState } from 'redux-localstore';
const state = getState();
```
### If you need to reset the local store
```javascript
import { resetState } from 'redux-localstore';
resetState();
```