为什么我的网站在使用 redux-persist 后不再加载

Question

我正在尝试学习如何在我的项目中实现 redux-persist，以便在用户刷新页面等情况下保持状态... 修改所需文件后，我没有错误，但我的页面只是白色，没有呈现，我不明白为什么..

这是我的代码

import { ProcessReducer } from "./chat/chatReducer";
import { createStore, combineReducers } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import token from "./login/token";
import isLoggedIn from "./login/isLoggedIn";
import userId from "./login/userId";
import img from "./Donation/ImageReducer";
import title from "./Donation/TitleReducer";
import amount from "./Donation/AmountReducer";

const rootReducer = combineReducers({
  token_1: token,
  isLoggedIn: isLoggedIn,
  userId: userId,
  ProcessReducer: ProcessReducer,
  img: img,
  title: title,
  amount: amount,
});

const persistConfig = {
  key: "root",
  storage,
  whitelist: [
    "title",
    "img",
    "token_1",
    "isLoggedIn",
    "userId",
    "ProcessReducer",
    "amount",
  ],
};

export default persistReducer(persistConfig, rootReducer);
export const store = createStore(rootReducer);
export const persistor = persistStore(store);

和

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {store,persistor} from "./reducers/index"
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";
import {PersistGate} from 'redux-persist/integration/react'


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

我只修改了这两个文件，谁能指出我做错了什么？谢谢你 --- 以下是我的原始文件

import { ProcessReducer } from "./chat/chatReducer";
import { createStore, combineReducers } from "redux";
import token from "./login/token";
import isLoggedIn from "./login/isLoggedIn";
import userId from "./login/userId";
import img from "./Donation/ImageReducer";
import title from "./Donation/TitleReducer";
import amount from "./Donation/AmountReducer"

const reducers = combineReducers({
  token_1: token,
  isLoggedIn: isLoggedIn,
  userId: userId,
  ProcessReducer: ProcessReducer,
  img: img,
  title:title,
  amount:amount
});

export const store = createStore(reducers);

export default store;

和

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {store} from "./reducers/index"
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";


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

Answer 1

你的实现似乎是错误的。让我们一步一步回顾它们：

首先，创建一个 persistedReducer:

const persistedReducer = persistReducer(persistConfig, rootReducer);

现在，使用 persistedReducer 创建 store（您使用 rootReducer 创建您的商店是不正确的）

const store = createStore(persistedReducer);

您创建 store，向前迈出一步，您还需要一个 persist 商店：

const persistor = persistStore(store);

到这里就完成了，把它们全部打包，导出要点：

import {createStore} from 'redux';
import {persistStore, persistReducer} from 'redux-persist':
// other codes ...

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

export {store, persistor}

是时候在 App 中使用 store 和 persistor:

import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/lib/integration/react';
import {store, persistor} from 'path/to/the/store';

const App = () => (
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <MyApplication />
    </PersistGate>
  </Provider>
)

为什么我的网站在使用 redux-persist 后不再加载

Why is my website not loading anymore after using redux-persist

reactjs

react-redux

redux-persist