如何使用 redux-toolkit 配置 redux-persist？答案

【问题标题】：How to configure redux-persist with redux-toolkit?如何使用 redux-toolkit 配置 redux-persist？
【发布时间】：2020-09-06 07:30:46
【问题描述】：

我已经使用传统的 react-redux 设置配置了 redux-persist，如下所示：

onst persistConfig = {
  key: 'root',
  storage,
  whitelist: ['todos'],
};

const persistedReducer = persistReducer(persistConfig, reducer);

const store = createStore(
  persistedReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const persistor = persistStore(store);

// wrapper
const StateProvider = ({ children }) => {
  return (
    <Provider store={store}>
      <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
        {children}
      </PersistGate>
    </Provider>
  );
};

但是，如何使用 redux-toolkit 进行配置？到目前为止，我已经尝试过：

const persistedReducer = persistReducer(persistConfig, todoreducer);
const store = configureStore({
  reducer: {
    todos: persistedReducer,
  },
});

const persistor = persistStore(store);

// wrapper
const StateProvider = ({ children }) => {
  return (
    <Provider store={store}>
      <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
        {children}
      </PersistGate>
    </Provider>
  );
};

但是，它不起作用。我无法通过const todos = useSelector(state => state.todos); 获得todos

它返回未定义。

【问题讨论】：

这看起来是正确的。你能提供一个codeandbox吗？

标签： javascript reactjs redux react-redux redux-persist

【解决方案1】：

store.js

import {configureStore} from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage'
import {combineReducers} from "redux"; 
import { persistReducer } from 'redux-persist'
import thunk from 'redux-thunk'

const reducers = combineReducers({
 //...            
});

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

const persistedReducer = persistReducer(persistConfig, reducers);


const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk]
});

export default store;

索引/App.js

import store from './app/store';
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'

let persistor = persistStore(store);

    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
        <App/>
        </PersistGate>
    </Provider>,

【讨论】：

很好的解释。
请注意，当您使用 redux 工具包中的 configureStore 时，默认情况下已经包含 redux-thunk，因此无需再次包含它。
这在 reduxjs-toolkit 1.8 / redux-persist 6.0.0 上对我不起作用。按照@pipedreamomb 推荐的 Redux Toolkit 文档 (redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist) 中的指南进行操作。

【解决方案2】：

现在Redux Toolkit docs 中有一个指南可以帮助您解决此问题，并提供有关清除持久状态和使用RTK Query 的建议。

它还有一些代码，您需要复制和粘贴以忽略react-persist 调度的操作类型。这将阻止它抛出错误消息（当我使用 Expo 运行我的 React Native 应用程序时，我收到了错误 A non-serializable value was detected in an action, in the path: `register`.）。

在撰写本文时，他们的代码示例如下所示：

import { configureStore } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'

import App from './App'
import rootReducer from './reducers'

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

let persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

【讨论】：

【解决方案3】：

我只是用完全相同的设置尝试了这个，它似乎有效。如果有帮助，我在 "@reduxjs/toolkit": "^1.4.0",、"redux-persist": "^6.0.0" 和 "react-redux": "^7.2.1"。 HTH。

【讨论】：