如何在redux状态下添加/更改属性？

如何解决如何在redux状态下添加/更改属性？

    export default function() {
  return [
    {
      id: 1,author: "notCurrentUser",price: "200$",type: "Phone",name: "Redmi 8a",img: "https://i01.appmifile.com/webfile/globalimg/gaoruijia/Phone/C3K-red.png",},{
      id: 2,price: "350$",name: "Note 10",img: "https://www.sunrise.ch/en/kmu/geraete/handys/samsung-galaxy-note10-plus-5g.primaryproductimage.code-MDAwMDAwMDAwMDAwMDIwMDAx.format-hardware-configurator-l.png",{
      id: 3,price: "1000$",name: "IPhone XS",img: "https://mimelon.com/uploads/catalog/Product//iphone-xs-max-space-select-2018.png",]
}

因此，我想将新属性添加到活动产品的对象中。 例如：我在IPhone XS上按，当我按Redux时，将新的道具BASKET：TRUE添加到IPhone XS的对象。这样：

{
          id: 3,BASKET: TRUE,

我认为，我可以做类似的事情，但是我不确定：

 switch (action.type) {
        case  types.BASKET:
            return {
                action.payload,{
                 BASKET: TRUE
                }
            };        

        default:
            return state;
    }
}

解决方法

假设您的组件如下所示，并且有一些按钮可以调度将购物篮属性添加到产品 iPhone XS 从而添加 name 的操作>一起发送。

Component.js：

import { useDispatch } from 'react-redux';

const Component = () => {
   const dispatch = useDispatch();

   return (
     <div onClick={()=>dispatch(addToBasket('IPhone XS')}></div>
   )
}

actions.js：

export const addToBasket = (name) = dispatch => {
 dispatch({ type: BASKET,payload: name });
}

reducers.js：

const defaultState = {
  products: [{
  id: 1,author: "notCurrentUser",price: "200$",type: "Phone",name: "Redmi 8a",img: "https://i01.appmifile.com/webfile/globalimg/gaoruijia/Phone/C3K-red.png",},{
  id: 2,price: "350$",name: "Note 10",img: "https://www.sunrise.ch/en/kmu/geraete/handys/samsung-galaxy-note10-plus-5g.primaryproductimage.code-MDAwMDAwMDAwMDAwMDIwMDAx.format-hardware-configurator-l.png",{
  id: 3,price: "1000$",name: "IPhone XS",img: "https://mimelon.com/uploads/catalog/Product//iphone-xs-max-space-select-2018.png",}]
};

export default (state = defaultState,action) => {
  switch (action.type) {
    case actionTypes.BASKET: {
     let productToUpdate = state.products.find(item => item.name === action.payload);
     productToUpdate = { ...productToUpdate,BASKET: true }
     let products = state.products.filter(item => item.name !== productToUpdate.name);
    return { ...state,products : [...state.products,productToUpdate] } 
}

在reducers文件中：

1. 我们只是通过查找名称为“ iPhone XS”的产品来查找需要更新的特定产品。
2. 我们将属性BASKET: true添加到产品中。
3. 通过消除以前的产品并将此更新的产品添加到列表中来更新产品的总体列表。

注意：我建议您基于id而不是基于name属性来更新产品，因为可以有多个名为“ iPhone XS”的产品。