Блог

Я создаю функциональность корзины, используя createSlice от redux toolkit. Но на вкладке приложения браузера значение 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. Пожалуйста, поправьте меня.

Я думаю, проблема в том, что вы делаете localStorage что-то в действии редуктора. Редуктор может выполнять только простые операции и изменять состояние, поэтому я рекомендую вам попробовать передавать localStorage вызовы в действие thunk.