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

nzkunb0c  于 2023-10-17  发布在  React
关注(0)|答案(2)|浏览(117)

我试图学习如何实现redux坚持到我的项目inorder在用户刷新页面等情况下持久状态.修改所需的文件后,我没有错误,但我的网页只是白色,没有渲染,我不明白为什么..
这是我的代码

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')
);
cotxawn7

cotxawn71#

你的实现似乎是错误的。让我们一步一步地回顾它们:
首先,创建一个persistedReducer

const persistedReducer = persistReducer(persistConfig, rootReducer);

现在,使用persistedReducer创建store(您使用rootReducer创建存储,这是不正确的)

const store = createStore(persistedReducer);

你创建了store,再往前一步,你还需要一个persist存储:

const persistor = persistStore(store);

我们在这里完成,将它们 Package 在一起,并导出必需品:

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中使用storepersistor的时间:

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>
)
3hvapo4f

3hvapo4f2#

同样的事情发生在我身上。但是我的Redux侧码很好,没有任何问题。发生了什么事是我 Package 我的整个HTML内容内的布局文件(Next.Js 13)如下所示。

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <ReduxProvider>
        <html lang="en">
            <body className={inter.className}>
                
                    <ThemeRegistry lasdoo5_lasitha_lakmal={'blue'} options={{ key: 'mui' }}>
                        {children}
                    </ThemeRegistry>
            </body>
        </html>
      </ReduxProvider>
    )
}

然后我把它改为下面的代码,它工作了。

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <ReduxProvider>
                    <ThemeRegistry lasdoo5_lasitha_lakmal={'blue'} options={{ key: 'mui' }}>
                        {children}
                    </ThemeRegistry>
                </ReduxProvider>
            </body>
        </html>
    )
}

相关问题