应用react-persist后，useSelector获取Redux状态时出现解构错误

问题根源 #

你写的const { cart } = useSelector(state => state.cart);触发错误，因为state.cart返回undefined——这是redux-persist集成后，状态加载时机或reducer结构不匹配导致的。

修复方案 #

1. 修正useSelector取值方式 #

避免直接解构可能为undefined的对象，改用可选链或直接取值：

// 若你的CartSlice状态本身就是cart对象，直接取state.cart
const cart = useSelector(state => state.cart);

// 若CartSlice的状态结构里包含cart字段，用可选链确保安全
const cart = useSelector(state => state.cart?.cart);

2. 调整store的persist配置 #

当前persistConfig使用key: 'root'但仅持久化cart模块，会导致状态结构异常，修改如下：

import { configureStore } from "@reduxjs/toolkit";
import CartSlice from "./CartSlice";
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from "redux-persist";

// 将key改为对应模块名cart
const persistConfig = {
    key: 'cart',
    storage,
};

const persistedReducer = persistReducer(persistConfig, CartSlice);

const store = configureStore({
    reducer: {
        cart: persistedReducer,
    }
})

// 同时导出store和persistor，方便后续使用PersistGate
export const store = store;
export const persistor = persistStore(store);

3. 用PersistGate等待持久化状态加载 #

在根组件外层包裹PersistGate，确保状态加载完成后再渲染页面，避免初始状态为undefined：

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

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

4. 检查CartSlice的初始状态 #

确保你的CartSlice定义了合法的初始状态，示例：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  cart: [], // 根据你的业务需求设置初始结构
};

const CartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    // 你的业务reducer逻辑
  },
});

export default CartSlice.reducer;

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