尝试在我的 store.js 文件中设置此 redux-persist 但用户不再存储
Trying to set up this redux-persist in my store.js file but user not storing anymore
我已经在我的应用程序中实现了 redux-persist 以存储用户状态 post 刷新。现在的问题是用户根本没有存储。我怀疑这与我如何导出 'store' 或我如何定义减速器有关。无论哪种方式,我确定我没有正确实现 redux-persist。
这是我的 store.js 代码:
import { combineReducers, createStore } from "@reduxjs/toolkit";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import userReducer from "../Features/userSlice";
import questionReducer from "../Features/questionSlice";
const reducers = combineReducers({
user: userReducer,
question: questionReducer,
});
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
let store = createStore(persistedReducer);
let persistor = persistStore(store);
export { store, persistor };
这是我的 index.js 代码:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { store, persistor } from "./app/store";
import { Provider } from "react-redux";
import firebase from "firebase/app";
import { firebaseConfig } from "./firebase";
import { PersistGate } from "redux-persist/lib/integration/react";
if (firebase.apps.length === 0) {
firebase.initializeApp(firebaseConfig);
}
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
所以,实际上设置或多或少是正确的。问题是我无法在 devtools 中获取状态变化,这让我很困惑。我对 store.js 文件进行了以下更改并且有效:
import { combineReducers, createStore, configureStore } from "@reduxjs/toolkit";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import userReducer from "../Features/userSlice";
import questionReducer from "../Features/questionSlice";
const reducers = combineReducers({
user: userReducer,
question: questionReducer,
});
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
export default () => {
let store = createStore(
persistedReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
let persistor = persistStore(store);
return { store, persistor };
};
我已经在我的应用程序中实现了 redux-persist 以存储用户状态 post 刷新。现在的问题是用户根本没有存储。我怀疑这与我如何导出 'store' 或我如何定义减速器有关。无论哪种方式,我确定我没有正确实现 redux-persist。
这是我的 store.js 代码:
import { combineReducers, createStore } from "@reduxjs/toolkit";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import userReducer from "../Features/userSlice";
import questionReducer from "../Features/questionSlice";
const reducers = combineReducers({
user: userReducer,
question: questionReducer,
});
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
let store = createStore(persistedReducer);
let persistor = persistStore(store);
export { store, persistor };
这是我的 index.js 代码:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { store, persistor } from "./app/store";
import { Provider } from "react-redux";
import firebase from "firebase/app";
import { firebaseConfig } from "./firebase";
import { PersistGate } from "redux-persist/lib/integration/react";
if (firebase.apps.length === 0) {
firebase.initializeApp(firebaseConfig);
}
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
所以,实际上设置或多或少是正确的。问题是我无法在 devtools 中获取状态变化,这让我很困惑。我对 store.js 文件进行了以下更改并且有效:
import { combineReducers, createStore, configureStore } from "@reduxjs/toolkit";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import userReducer from "../Features/userSlice";
import questionReducer from "../Features/questionSlice";
const reducers = combineReducers({
user: userReducer,
question: questionReducer,
});
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
export default () => {
let store = createStore(
persistedReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
let persistor = persistStore(store);
return { store, persistor };
};