如何在react native中传递带有redux计数的产品id，以实现类似addtocart的电子商务功能

Question

制作一个类似电子商务的平台，在这里我想add_to_cart并在图标上显示计数。和计数显示根据存储在阵列中的id的产品

this is my reducers :-
const cartItems = (state = [], action) => {
switch (action.type) {
case 'ADD_TO_CART':
return [...state, action.payload]
case 'REMOVE_FROM_CART':
return state.filter(cartItem => cartItem.id !== action.payload.id)
}
return state
}
export default cartItems

其中我正在根据选择的项目增加计数

const mapStateToProps = reduxStore => {
return {
cartItems: reduxStore
}
}
const mapDispatchToProps = (dispatch) => {
return {
addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART', payload: product })
}
}
export default connect(mapStateToProps , mapDispatchToProps)(ContentPage)

只有我得到了计数，而不是购物车项目，我想通过this.state.data.name && this.state.data.img，它从URL获得！

Answer 1

如果你要求传递额外的道具，mapStateToProps还需要一个可选的道具

const mapStateToProps = (reduxStore, ...otherProps) => {
return {
cartItems: reduxStore
}
}

您可以通过this.props.cartItems引用数据

Answer 2

(已编辑(尝试更新状态，如下所示：

const initialState = {
cartItems: [],
};
const cartItems = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TO_CART':
return { ...state, cartItems: state.cartItems.push(action.payload) };
case 'REMOVE_FROM_CART':
return {
...state,
cartItems: state.filter(cartItem => cartItem.id !== action.payload.id),
};
return state;
}
};

并且可以访问道具中的cartItems：

const mapStateToProps = reduxStore => {
return {
cartItems: reduxStore.cartItems
}
}