React/Redux购物车未更新

Question

我正在学习如何通过查看示例手动构建一个非常简单的购物车，并成功地在我的示例网站上获得了一些内容，没有任何错误。这是购物车组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
class Cart extends Component{
render() {
return (
<div>
{this.props.items.length}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
items: state.items
}
}
export default connect(mapStateToProps)(Cart);

当有人点击另一个组件上的按钮时，它应该运行减速器中的内容：

const initialState = {
items : []
}
const cartReducer = (state = initialState, action) => {
const newState = {...state};
switch(action.type) {
case "ADD_TO_CART":
newState.items.push(action.item);
break;
default:
return newState;
}
return newState;
}
export default cartReducer;

然而，每当我点击按钮时，我都无法看到购物车的this.props.items.length增加，尽管我可以在控制台中记录项目数组并看到它被添加到其中。有人对如何解决这个问题有什么建议吗？如果需要，我可以提供更多的代码。

Answer 1

您的组件不会重新渲染，因为this.props.items与以前的array相同。实际上，您还没有更新状态以拥有一个新的、修改过的数组。

你所做的是你绝对不应该做的事情，那就是变异现有的state。newState.items与state.items是相同的array，因为newState复制了state的所有属性。不能对其调用push()，因为push是一个变异操作。

您需要使用排列语法或concat()创建array的副本。

const cartReducer = (state = initialState, action) => {
switch(action.type) {
case "ADD_TO_CART":
return {
...state,
items: state.items.concat(action.item)
}
default:
return state;
}
}

---

您还可以使用Redux Toolkit帮助程序库，它允许您编写带有突变的减少程序，从而使生活更轻松。

const cartSlice = createSlice({
name: "cart",
initialState: {
items: []
},
reducers: {
addToCart(state, action) {
state.items.push(action.payload)
},
}
});
// action creator functions
export const { addToCart } = cartSlice.actions;
// reducer
export default cartSlice.reducer;