React - Redux：所有数据都替换为最后一个有效负载

Question

我正在使用 redux 来存储我的数据。最初，初始状态是一个空数组（[]），我第一次发送数据时，数据存储正确，这是我的代码：

const cartReducer = createReducer([])({
  [types.ADD_TO_CART]: (state, action) => {
    let toReturn = [];

    state.map((item, idx) => {
      toReturn.push(item)
    })


    if (toReturn.length == 0) {

      let obj = {
        header: action.payload.header,
        menu: [
          {
            id_res_menu: action.payload.id_res_menu,
            is_menu: action.payload.is_menu,
            combo: action.payload.combo,
          },
        ],
      };

      toReturn.push(obj);
      return [obj]
    }
    else{
      if(action.payload.is_menu == "S"){
        
        return toReturn.map((item, idx) => {
          if(item.header.id_pla_user == action.payload.header.id_pla_user && item.header.id_res_restaurant == action.payload.header.id_res_restaurant){
            let obj = {
              id_res_menu: action.payload.id_res_menu,
              is_menu: action.payload.is_menu,
              combo: action.payload.combo,
            }
          
            return {
                ...item,
                menu: [
                  ...item.menu,
                  obj
                ]
              }
          }
        })

      }
    }

首先，我将实际状态复制到一个名为 toReturn 的变量，并在该变量中进行更改。然后，我验证状态的副本 (toReturn) 长度是否为 0，如果为 0，我将创建的对象推送到数组并 return 将其推送到状态。

obj方案是下一个：

header: {
  id_user: 1,
  id_res: 1
}
combo:[
  {
    quantity: 1,
    category: "salad",
    name: "caesar salad"
  },
  {
    quantity: 1,
    category: "spaghetti",
    name: "pesto"
  }
]

我第一次派发动作，效果很好，数据存储正确，但第二次，数据被替换成这样：

有效负载：

header: {
  id_user: 1,
  id_res: 1
}
combo:[
{
  quantity: 1,
  category: "soup",
  name: "pumpkin soup"
},

{
  quantity: 1,
  category: "frying",
  name: "fried chicken"
]

存储的数据：

state: [
  {
    header: {
      id_user: 1,
      id_res: 1
    },
    menu:[
      {
        combo:[
          {
            quantity: 1,
            category: "soup",
            name: "pumpkin soup"
          },
          {
            quantity: 1,
            category: "frying",
            name: "fried chicken"
          }
        ]
      },
      {
        combo:[
          {
            quantity: 1,
            category: "soup",
            name: "pumpkin soup"
          },
          {
            quantity: 1,
            category: "frying",
            name: "fried chicken"
          }
        ]
      },
    ]
  }
]

最后一个有效载荷正在替换所有现有数据（南瓜汤 & 炸鸡），如果我添加另一个，第三个有效载荷替换所有数据，依此类推

此外，第二次，如果我在更改之前打印存储的数据，控制台显示当前状态是最后一个有效负载（南瓜汤和炸鸡）我不知道是否console.logs 在操作之后最终被处理。

Answer 1

I push the created object to the array and return it to the state.

你实际做的是更新局部变量toReturn。这个变量不是状态的一部分，永远不会成为状态的一部分。尽管名字如此，但您实际上并不 return toReturn!

toReturn.push(obj);
return [obj]

而不是你return [obj]。这是一个包含一个元素的数组，该元素是您刚刚添加的项目。这个单项数组替换了你的整个状态。

在 Redux Toolkit reducer 中，您可以修改现有状态或 return 新状态。如果你正在修改，那么你不应该 return 任何东西。

我不完全理解你的减速器应该做什么，但试试这个：

const cartReducer = createReducer([], {
  [types.ADD_TO_CART]: (state, action) => {
    // separate payload into a header and object
    const { header, ...obj } = action.payload;

    // find a matching object in state, if one exists
    const match = state.find(
      (item) =>
        item.header.id_user === header.id_user &&
        item.header.id_res === header.id_res
    );

    // if there was a match found, update that item
    if (match) {
      match.menu.push(obj);
    }

    // if not, add a new item to state
    else {
      state.push({
        header,
        menu: [obj]
      });
    }
  }
});

React - Redux：所有数据都替换为最后一个有效负载

React - Redux: All the data is replacing with the last payload

redux

react-redux

redux-toolkit