我试图学习如何实现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')
);
2条答案
按热度按时间cotxawn71#
你的实现似乎是错误的。让我们一步一步地回顾它们:
首先,创建一个
persistedReducer
:现在,使用
persistedReducer
创建store
(您使用rootReducer
创建存储,这是不正确的)你创建了
store
,再往前一步,你还需要一个persist
存储:我们在这里完成,将它们 Package 在一起,并导出必需品:
在
App
中使用store
和persistor
的时间:3hvapo4f2#
同样的事情发生在我身上。但是我的Redux侧码很好,没有任何问题。发生了什么事是我 Package 我的整个HTML内容内的布局文件(Next.Js 13)如下所示。
然后我把它改为下面的代码,它工作了。