redux状態でプロパティを追加/変更するにはどうすればよいですか？

debugcn 投稿 Dev

死神

    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,
      author: "notCurrentUser",
      price: "350$",
      type: "Phone",
      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,
      author: "notCurrentUser",
      price: "1000$",
      type: "Phone",
      name: "IPhone XS",
      img: "https://mimelon.com/uploads/catalog/Product//iphone-xs-max-space-select-2018.png",
    },
]
}

そのため、アクティブな製品のオブジェクトに新しいプロパティを追加したいと思います。例：IPhone XSを押し、を押すと、新しい小道具BASKET：TRUEをIPhoneXSのオブジェクトに追加します。そのように：

{
          id: 3,
          author: "notCurrentUser",
          price: "1000$",
          type: "Phone",
          BASKET: TRUE,
          name: "IPhone XS",
          img: "https://mimelon.com/uploads/catalog/Product//iphone-xs-max-space-select-2018.png",
        },

私はそのようなことをすることができると思いますが、私にはわかりません：

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

        default:
            return state;
    }
}

Awais Rafiq Chaudhry

コンポーネントが以下のようなものであり、バスケット属性を製品iPhone XSに追加するアクションをディスパッチするボタンがあるとすると、名前が一緒に送信されます。

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,
  author: "notCurrentUser",
  price: "350$",
  type: "Phone",
  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,
  author: "notCurrentUser",
  price: "1000$",
  type: "Phone",
  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] } 
}

レデューサーファイル内：