Redux Toolkit中useSelector解构属性报错问题求助

你遇到的错误是因为Redux store的结构配置错误，导致state.user不存在。

在你的store.js中，你直接将持久化后的userReducer作为根reducer：

const store = configureStore({
  reducer: persistedReducer,
  // ...其他配置
});

这会让整个Redux全局state等于userSlice的状态，而不是原来的{ user: userSlice状态 }结构。所以当你在Login组件中尝试解构state.user时，state.user是undefined，自然无法取出isSuccess等属性。

有两种修复方式，选其中一种即可：

方式一：保持原有state结构（推荐） #

修改store.js，将持久化后的reducer放到user键下，同时调整persistConfig的key：

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";
import storage from "redux-persist/lib/storage";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

// 修改persistConfig的key为"user"，对应slice的命名
const persistConfig = {
  key: "user",
  storage,
};

const persistedReducer = persistReducer(persistConfig, userReducer);

const store = configureStore({
  // 保持reducer的结构，将persistedReducer放到user键下
  reducer: {
    user: persistedReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

const persistor = persistStore(store);

export { store, persistor };

这样你的Login组件中useSelector(state => state.user)就能正常获取到userSlice的状态了。

方式二：修改组件中的useSelector #

如果不想调整store结构，可以直接在Login组件中取全局state：

const { isSuccess, isError, errorMessage } = useSelector(state => state);

另外，确保你在根组件（比如App.js）中用PersistGate包裹了应用，这是redux-persist生效的必要步骤：

import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./store";

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* 你的路由和页面组件 */}
      </PersistGate>
    </Provider>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Nikita Kubavat