Как написать localStorage в приложении Redux, используя промежуточное ПО?

Question

Я создаю приложение, которое выбирает список городов, введенных пользователем, и соответствующую им погоду, используя openweather API. В результате я хочу, чтобы города оставались после обновления страницы. Я знаю, как сохранить данные с помощью браузера localStorage API. Но я не знаю, как сохранить это через промежуточное ПО и передать его провайдеру.

Ниже приведен мой основной файл Index.js -:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';

import App from './components/app';
import reducers from './reducers';
import {loadState,saveState} from './localStorage';

const persistedState=loadState();
const store=createStore(persistedState);

store.subscribe(()=>{
store.getState()
});

const createStoreWithMiddleware =
     applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container-fluid'));

Это файл localStorage.js -:

export const loadState=()=>{
try{
    const serializedState=localStorage.getItem('state');
    if(serializedState===null){
        return undefined;
    }
    return JSON.parse(serializedState);
}catch(err){
    return undefined;
}
};

export const saveState=(state)=>{
try {
    const serializedState=JSON.stringify(state);
    localStorage.setItem('state',serializedState);
}catch(err){
    console.log(err);
}};

Я записал редуктор в разные файлы в папке редукторов.

redurs / index.js -:

import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather';

const rootReducer = combineReducers({
weather:WeatherReducer
});

export default rootReducer;

и другой редуктор в redurs / reducer_weather.js -:

import {FETCH_WEATHER} from '../actions/index';
import {DELETECITY} from '../actions/deleterow';
export default function(state=[],action){

switch(action.type){
    case FETCH_WEATHER:
        console.log([action.payload.data, ...state]);
        return [action.payload.data, ...state];
    case DELETECITY:
        console.log([...state].filter((weather)=>{
            return weather.city.id!==action.payload
        }));
        return [...state].filter((weather)=>{
            return weather.city.id!==action.payload
        });
    default:
        return state;

    }; 
}

До использования localStorage для сохранения состояния приложения мой код работал нормально. Но теперь это показывает мне ошибку. У меня проблема с const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

как использовать store с использованием этого промежуточного программного обеспечения и как передать свойство store тега <Provider>?

Answer 1

Я бы предложил вам использовать redux-persist .

Сохраняйте и восстанавливайте запас редукции

При использовании этого промежуточного программного обеспечения все данные, хранящиеся в хранилище Redux, автоматически сохраняются в localStorage (также можно использовать другой тип хранилища). Поэтому при обновлении страницы уже сохраненные данные из предыдущего запроса будут автоматически перенаправлены (отправлены) обратно в хранилище.

---

Пример, взятый из документации:

Конфигурация

// configureStore.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

Использование

import { PersistGate } from 'redux-persist/integration/react'

// ... normal setup, create store and persistor, import components etc.

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};