我安装了redux-persist
,现在我所有的Redux状态都返回undefined。
所有其他Redux状态以前都可以工作,但是一旦我更改为redux-persist
,它们就不再工作并返回undefined。我有2个Redux切片,一个UserSlice.js和另一个ModalSlice.js,我只想在UserSlice.js上持久化
下面是我如何使用它的一个例子:
export default function LoginModal() {
// Modal
const isLoginOpen = useSelector((state) => state.modal.loginModalOpen);
const isSignupOpen = useSelector((state) => state.modal.signupModalOpen);
const isPasswordOpen = useSelector((state) => state.modal.passwordModalOpen);
<button
onClick={() => dispatch(openLoginModal())}
className="btn home__cta--btn"
>
字符串
这里是我的store.js
import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, userSlice);
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== "production",
middleware: [thunk],
});
export const persistor = persistStore(store);
型
Userslice.js:
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
email: null,
uid: null,
premium: false,
type: "Basic",
currentUser: null,
};
const userSlice = createSlice({
name: "user",
initialState,
reducers: {
setCurrentUser: (state, action) => {
state.currentUser = action.payload;
},
signOutUser: (state) => {
state.email = null;
state.uid = null;
state.premium = false;
},
typeOfSubIsYearly: (state) => {
state.type = "Premium Plus";
},
typeOfSubIsMonthly: (state) => {
state.type = "Premium";
},
setPremiumStatus: (state, action) => {
state.premium = action.payload;
},
},
});
export const {
setCurrentUser,
signOutUser,
upgradeUser,
typeOfSubIsYearly,
typeOfSubIsMonthly,
setPremiumStatus,
} = userSlice.actions;
export default userSlice.reducer;`
型
下面是我的app.js:
import "@/styles/globals.css";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faCrown,
faStar,
faStarHalf,
faUser,
faX,
} from "@fortawesome/free-solid-svg-icons";
import { Provider } from "react-redux";
import { persistor, store } from "@/redux/store";
import { PersistGate } from "redux-persist/integration/react";
library.add(faCrown, faStar, faStarHalf, faUser, faX);
export default function App({ Component, pageProps }) {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
</Provider>
);
}
型
1条答案
按热度按时间ldfqzlk81#
代码没有在Redux状态下包含
ModalSlice
reducer,所以state.modal
是未定义的。如果你想只持久化 * 用户状态,那么你可以通过几种方式来配置持久化。1.使用白名单/黑名单来排除/包括状态的特定部分。
字符串
1.仅保留用户切片。
型