如何使用 redux 工具包的 createSlice 创建 localStorage？答案

【问题标题】：How do I use redux toolkit's createSlice to create localStorage?如何使用 redux 工具包的 createSlice 创建 localStorage？
【发布时间】：2021-03-11 18:29:15
【问题描述】：

我正在使用 redux 工具包的 createSlice 制作购物车功能。但是在浏览器的应用程序选项卡中，localStorage 的值显示为 [object Object]。有人可以帮我解决这个问题吗？

cartSlice.js

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

const cartItemsFromStorage = localStorage.getItem('cartItems') ? localStorage.getItem('carts') : []

export const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    cartItems: cartItemsFromStorage,
  },
  reducers: {
    add: (state, action) => {
      const item = action.payload
      const existItem = state.cartItems.find(x => x.product === item.product)
      if (existItem) {
        const currentItems = state.cartItems.map(x => x.product === existItem.product ? item : x)
        state.cartItems = [...currentItems]
      } else {
        state.cartItems = [...state.cartItems, item]
        localStorage.setItem('cartItems', state.cartItems)
      }
    },
    // remove: (state, action) => {
    // },
  },
});

const { add } = cartSlice.actions;

export const selectCartItems = state => state.cart.cartItems;

export const addToCart = (id, qty) => async (dispatch) => {
  const { data } = await axios.get(`/api/products/${id}`)
  dispatch(add({
    product: data._id,
    name: data.name,
    imgae: data.imgae,
    price: data.price,
    countInStock: data.countInStock,
    qty
  }))
}

export default cartSlice.reducer;

CartScreen.js

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectCartItems, addToCart } from '../features/cartSlice'

const CartScreen = ({ match, location, history }) => {
  const productId = match.params.id
  const qty = location.search ? Number(location.search.split('=')[1]) : 1

  const dispatch = useDispatch()
  const cartItems = useSelector(selectCartItems)
  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty))
    }
    console.log(`cartItems: ${cartItems}`)
  }, [dispatch, productId, qty])

  return (
    <div>
      Cart
    </div>
  )
}

export default CartScreen

下次我刷新页面时，initialState 不存在，它显示为 [object Object]。我知道问题出在 localStorage 上。请纠正我。

【问题讨论】：

标签： redux local-storage redux-toolkit

【解决方案1】：

我认为问题在于您在减速器操作中执行localStorage 的东西。 Reducer 只能做简单的操作和修改状态，所以我鼓励你尝试将localStorage 调用传递给 thunk 动作。

【讨论】：