如何在ReactJS中的Reducer中更新Redux状态？

Question

请知道我是Redux的ReactJS的新手。

我有乘客清单，每位乘客都有航班清单。我想用动作属性checkedIn更新排期属性isCheckedIn。如何在reducer中实现？

reducer.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属性。我想通过操作中的checkedIn属性更新flights的{​​{1}}属性。

Answer 1

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

 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);

然后，找到要更改其checked_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;

因此，您已经找到了要更改的项目，将其更改，然后将其放回数组中（我认为这是做事的不变方法），然后返回FULL数组