如何使用 Cookie 作为我的 redux 工具包中的初始状态？

Question

我有这个 cartSlice，我想通过使用 cookie 作为初始状态来保留购物车，但问题是，如果我将 useSelector 调用到我的组件，则返回值是一个空对象。cookie 在那里，但我不知道为什么它没有被使用。useSelector 的返回值是一个空对象。

大车

[
    {
        "cartItem": {
            "id": "628a1738fd8299ae6659d994",
            "category": "chair",
            "name": "chair",
            "image": "https://res.cloudinary.com/dpxoclpym/image/upload/v1658125036/product-images/chair/chair-beige_02_at0trj.png",
            "color": "beige",
        },
        "itemQuantity": 1,
        "quantity": 1
    },
    {
        "cartItem": {
            "id": "628a1738fd8299ae6659d994",
            "category": "chair",
            "name": "chair",
            "image": "https://res.cloudinary.com/dpxoclpym/image/upload/v1658141184/product-images/chair/chair-navy_02_rrpazi.png",
            "color": "navy",

        },
        "itemQuantity": 1,
        "quantity": 1
    }
]

购物车切片

import { createSlice } from '@reduxjs/toolkit';
import Cookies from 'js-cookie';

const cartItem = Cookies.get('cartItems')
  ? JSON.parse(Cookies.get('cartItems'))
  : [];

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    cart: cartItem,
    quantity: 1,
    total: 0,
    noRepeatedItem: 1,
  },
  reducers: {
    addToCart: (state, action) => {
      if (action.payload.itemQuantity > 1) {
        state.quantity = action.payload.itemQuantity;
        state.cart.push({
          cartItem: action.payload.cartItem,
          quantity: action.payload.itemQuantity,
        });
      } else {
        state.quantity += 1;
        state.cart.push(action.payload);
      }
    },
  },
});

export const {
  addToCart,
} = cartSlice.actions;