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

编程问答 2022-08-12

问题描述

我已经使用传统的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>
  );
};

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

它返回未定义。

解决方法

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;

Index / 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>,
,

我只是使用完全类似的设置尝试了此操作，它似乎可以正常工作。如果有帮助，我将使用"@reduxjs/toolkit": "^1.4.0",，"redux-persist": "^6.0.0"和"react-redux": "^7.2.1"。 HTH。

,

现在 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,REGISTER],},}),})

let persistor = persistStore(store)

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