为什么我的 redux-persist 在重新加载时会丢失数据？答案

【问题标题】：why do my redux- persist lose data on reload?为什么我的 redux-persist 在重新加载时会丢失数据？
【发布时间】：2021-10-01 11:59:44
【问题描述】：

我在我的 Web 应用程序中使用 redux persist 将数据存储在 localStorage 中，但 redux 在页面重新加载时会丢失数据。有没有人有同样的问题，或者任何人都可以帮助我解决这个问题。

我的 redux-persist 初始化是：

import { createStore } from "redux";
import userData from "./reducers/reducers";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["userData"],
};

const persistedReducer = persistReducer(persistConfig, userData);

const store = createStore(persistedReducer);

export const persistor = persistStore(store);

export default store;

而我的 index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/lib/integration/react";
import { persistor } from "./redux/store";
import store from "./redux/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

我找不到任何错误或不良做法，任何人都可以帮助我。

【问题讨论】：

标签： reactjs redux react-redux redux-persist

【解决方案1】：

Redux-persist 会处理所有的事情。 redux-persist

例子：

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

App.js

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

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

【讨论】：

感谢您的回复。还是不行
将const persistedReducer = persistReducer(persistConfig, userData); 更改为const persistedReducer = persistReducer(persistConfig, { userData });
你的减速机组合了吗？
它给出一个错误``` TypeError: baseReducer is not a function ``
不，我没有合并，我只有一个减速器

【解决方案2】：

我没有看到你的代码有任何“错误”，唯一的区别是你没有rootReducer，你也不需要输入whitelist，因为当我使用whitelist时它没有' t 过滤其他的，至少它对我不起作用，说明哪个减速器应该/不应该保留存储的工作是使用 blackList 并传递不起作用的减速器。

尝试创建一个 rootReducer。

【讨论】：

先生 userData 是我的 rootReducer