Состоящее состояние применения с Redux и LocalStorage

Примечание: это было первоначально написано на португальском языке и переведено Google

Эта библиотека позволяет отслеживать статус приложения ( redux сохранить ) и повторить в LocalStorage (Браузер), что позволяет перезагрузить страницу без утраченного состояния.

• Первый шаг – импортировать библиотеку и информировать хранить

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)

Только с жирными линиями все состояние вашего приложения будет воспроизведено в Браузер S 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
  }
}

Метод Определение проверяет, есть ли это что-нибудь в LocalStorage , если это так, он использует его как начальное состояние… В противном случае он использует набор состояний по умолчанию. Очень просто, не так ли?

Единственная деталь, которую следует отметить, – это то, что имя передавалось как второй аргумент для Определение Имя Reducer используется в комбинированные .

Настройки в основном это, и вы можете найти библиотеку по адресу: https://github.com/arojunior/redux-localstore

Оригинал: “https://dev.to/arojunior/persisting-application-state-with-redux-and-localstorage-3h2”