时间戳

首页 > 解决方案 > 如何在 ReactJS 的 Reducer 中更新 redux 状态？

javascript - 如何在 ReactJS 的 Reducer 中更新 redux 状态？

问题描述

请知道我是 Redux 的 ReactJS 新手。

我有乘客名单，每个乘客都有航班清单。我想checkedIn用 action 属性更新 flight 属性isCheckedIn。我怎样才能在减速器中实现这一点？

减速器.js

export default function passengerReducer(
  state = initialState.passengers,
  action
) {
  switch (action.type) {
    case types.LOAD_PASSENGERS_SUCCESS:
      return action.passengers;
    case types.UPDATE_PASSENGER_SUCCESS:
      console.log("action ", action.passengerData.passengerId);
      console.log("state ", state);
      return state
        .filter(x => x.id == action.passengerData.passengerId)
        .map(f => {
          f.flights[0].checkedIn = action.passengerData.isCheckedIn
        });

    default:
      return state;
  }
}

state包含对象数组。每个对象还包含flights. 目前，我只关注flights阵列中的第一次飞行。

在此处输入图像描述

动作包含isCheckedIn属性。我想从操作中更新with属性checkedIn的属性。flightsisCheckedIn

在此处输入图像描述

标签： javascriptreactjsreact-redux

解决方案

所以这是我认为有问题的代码：

 case types.UPDATE_PASSENGER_SUCCESS:
  console.log("action ", action.passengerData.passengerId);
  console.log("state ", state);
  return state
    .filter(x => x.id == action.passengerData.passengerId)
    .map(f => {
      f.flights[0].checkedIn = action.passengerData.isCheckedIn
    });

您正在 (a) 仅针对要更改的元素过滤数组，以及 (b) 映射但不从 map 函数返回任何内容

仅 (a) 单独是不好的——您要更改整个状态以仅包含过滤后的项目？我不认为那是你的本意。但是然后 (b) 意味着您要返回一个完整的数组undefined

相反，您想要做的是创建一个新数组，var newArray = state.slice(0);

然后，找到要更改其 check_in 属性的项目的索引，

var index = newArray.findIndex(x => x.id == action.passengerData.passengerId);
var newPassenger = Object.assign({}, newArray[index]);
newPassenger.flights[0].checkedIn = action.passengerData.isCheckedIn;
newArray[index] = newPassenger;
return newArray;

所以你找到了你想改变的项目，改变它，把它放回数组中（我认为这是不可变的做事方式），然后返回完整数组

推荐阅读