使用 redux-persist 和 redux thunk答案

【问题标题】：using redux-persist with redux thunk使用 redux-persist 和 redux thunk
【发布时间】：2020-07-12 09:38:50
【问题描述】：

大家好，我在 nextjs 中使用 redux thunk，现在我想在我的应用程序中添加 redux-persist。所以最初我的代码就像

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

export const makeStore = (initialState, options) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};

现在有谁能帮助我只在 redux 的设置中坚持吗？我尝试了一些解决方案，但没有成功

【问题讨论】：

标签： reactjs redux react-redux next.js redux-persist

【解决方案1】：

这里是link of the article，其中包含在现有应用中集成和使用包的简单而详细的步骤。

通常，我遵循与 redux 存储相同的结构。这种整合总是对我有用。所以我希望这对你也有帮助。

【讨论】：

【解决方案2】：

如果您真的需要保留您的redux state，据我所知有两种选择：首先你可以像这样按照你的意愿使用react-persist

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'reducer',
    storage: storage,
    whitelist: ['reducer'] // or blacklist to exclude specific reducers
 };
const presistedReducer = persistReducer(persistConfig, reducer );
const store = createStore(presistedReducer, 
composeWithDevTools(applyMiddleware(thunk)));
const persistor = persistStore(store);
export { persistor, store };

然后在您的component 中按照他们的documentation 中的说明执行以下操作

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>
  );
};

或者您可以简单地执行以下操作without relying on a library

import {
  createStore, combineReducers, compose, applyMiddleware,
 } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
function saveToLocalStorage(state) {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
}

function loadFromLocalStorage() {
const serializedState = localStorage.getItem('state');
if (serializedState === null) return undefined;
   return JSON.parse(serializedState);
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const presistedState = loadFromLocalStorage();
const store = createStore(
    reducer,
    presistedState,
    composeEnhancers(applyMiddleware(thunk)),
 );
store.subscribe(() => saveToLocalStorage(store.getState()));
export default store;

【讨论】：

所以每次我调用动作创建者和减速器执行一些突变时，状态都会设置为本地存储？我的意思是如果存储了一些初始状态，然后一段时间后我再次更新状态，以便更新后的状态将再次保存到本地？
是的，您可以在storage 中保留您想要的状态，您可以将initial state 作为reducer function 中状态参数的默认值传递，然后在每个更改您的状态更新应该被持久化。
很好的答案，谢谢。就 redux devtools 而言，它会像这里写的那样隐藏在生产环境中吗？或者如果 process.env === "production" 例如，它是否需要更多的条件逻辑来隐藏它？