Примечание. Первоначально он был написан на португальском языке и переведен Google
Эта библиотека позволяет отслеживать статус приложения (Redux store) и реплицировать в localStorage (браузер), что позволяет перезагрузить страницу без потери состояния.
- Первый шаг - импортировать библиотеку и сообщить в store
import {createStore, combineReducers} from 'redux' import storeSynchronize from 'redux-localstore' import {Reducer1, Reducer2} from './modules' const combineReducer = combineReducers({ Reducer1, Reducer2 }) export const store = createStore(combineReducer) storeSynchronize(store)
Только выделенные жирным шрифтом линии все состояние вашего приложения будет реплицировано в localStorage браузера. Остальные строки - это настройки по умолчанию для приложения Redux.
- На втором этапе вам необходимо настроить редукторы так, чтобы они собирали эти данные из localStorage при запуске / перезагрузке приложения.
import {defineState} from 'redux-localstore' const defaultState = { data: null } const initialState = defineState(defaultState)('Reducer1') export default (state = initialState, action) => { switch (action.type) { case 'ACTION1': return { ...state, data: action.payload } case 'ACTION2': return { ...state, data: null } default: return state } }
Метод defineState проверяет, есть ли у него что-то в localStorage, если есть, он использует это как начальное состояние ... В противном случае он использует значение по умолчанию состояние установлено. Очень просто, не правда ли?
Единственная деталь, которую следует отметить, - это то, что имя, переданное в качестве второго аргумента в defineState, является именем Reducer, используемого в combReducers.
Настройки в основном таковы, и вы можете найти библиотеку по адресу: https://github.com/arojunior/redux-localstore