在 Create-Store 中将persistedState 放在哪里以将 redux 存储保存到 localStorage

Question

我正在尝试使用浏览器 LocalStorage 保存我的 Redux-Store。但我不确定在哪里插入我的persistedState。这是我的代码。

import rootReducer from './Reducers';
import initialState from './Reducers/initialState';

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const saveToLocalStorage = (state) => {
    try {
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);
    } catch (error) {
        console.log(error);
    }
};
const loadFromLocalStorage = (state) => {
    try {
        const serializedState = localStorage.getItem('state');
        if (serializedState == null) return undefined;
        return JSON.parse(serializedState);
    } catch (error) {
        return undefined;
    }
};
const persistedState = loadFromLocalStorage();
// I inserted my persistedState in createStore but I am getting an error ==> {Expected to be function}
const store = createStore(rootReducer, initialState, persistedState,  composeEnhancers(applyMiddleware(thunk)));


store.subscribe(() => saveToLocalStorage(store.getState()));

export default store;

Answer 1

这取决于您何时需要该状态，但我想您希望在 init 上加载它，因此将其合并到您的初始状态是有意义的：

const persistedState = loadFromLocalStorage();
const store = createStore(rootReducer, {
  ...initialState,
  ...persistedState
}, composeEnhancers(applyMiddleware(thunk)));