redux - 如何使用 redux 工具包的 createSlice 创建 localStorage?
问题描述
我正在使用 redux 工具包的 createSlice 制作购物车功能。但是在浏览器的应用程序选项卡中,localStorage 的值显示为 [object Object]。有人可以帮我吗?
购物车切片.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
减速器动作。Reducer 只能做简单的操作和修改状态,所以我鼓励你尝试将localStorage
调用传递给 thunk 动作。
推荐阅读
- spring-data - Spring Data Neo4j 6:findAll() 操作无法正确映射关系
- java - 使用异常来验证输入
- sql-server - 我们可以将 SQL Server 与 Azure 通知中心连接起来吗?
- c# - IConnectionAdapter 的 OnConnectionAsync 方法中未捕获的异常
- python - 如何使用熊猫重新格式化数据框?
- python - 用中位数替换 NaN 值?
- visual-studio - Visual Studio 将未选择的代码灰显。如何改变它?
- arrays - 从 pandas 数据框单元格中解析 NumPy 数组
- laravel - 在我以另一个用户身份登录后,如何在不注销并重新登录 laravel 7 的情况下返回我的帐户
- javascript - 基于另一个内部for循环过滤数组