reactjs - 状态改变后返回初始状态

Question

我必须根据我的数据开发包含航类列表的网页。我的数据如下:

[
    {
      "id": 123,
      "direction": {
        "from": "Moscow",
        "to": "Berlin"
      },
      "arrival": "2016-06-08T19:52:27.979Z",
      "departure": "2016-06-08T17:51:20.979Z",
      "carrier": "S7"
    },
    {
      "id": 133,
      "direction": {
        "from": "Moscow",
        "to": "Samara"
      },
      "arrival": "2016-09-08T13:52:27.979Z",
      "departure": "2016-08-08T17:51:20.979Z",
      "carrier": "KLM"
    },
    {
      "id": 193,
      "direction": {
        "from": "Moscow",
        "to": "New York"
      },
      "arrival": "2016-06-08T21:52:27.979Z",
      "departure": "2016-06-08T17:51:20.979Z",
      "carrier": "Aeroflot"
    }
  ]

我还有一个简单的运营商过滤器。它只是 HTML 中的 select 标签，带有选项:All, Aeroflot, KLM, S7 和 onChange 事件的监听器:

const mapDispatchToProps = (dispatch) => {
  return {
    onChangeHandler(event) {
      if (event.target.value === 'All') {
        dispatch(selectAllCarriers())
      } else {
        dispatch(selectCarrier(event.target.value))
      }
    }
  }
};

当我选择 KLM 时，我返回此状态:

[
    {
      "id": 133,
      "direction": {
        "from": "Moscow",
        "to": "Samara"
      },
      "arrival": "2016-09-08T13:52:27.979Z",
      "departure": "2016-08-08T17:51:20.979Z",
      "carrier": "KLM"
    }
  ];

当我选择全部时，我必须返回完整的航类列表。我在 reducer 中实现了它:

const flights = (state = initialState, action) => {
  switch(action.type) {
    case 'SELECT_CARRIER':
      if (action.carrier === 'All') {
        return state
      } else {
        return state.filter(f => f.carrier === action.carrier);
      }
    default:
      return state;
  }
};

但是如果我选择 KLM 并且在 All 之后我只有 KLM 航类，因为我的州现在只包括 KLM 航类。我不明白什么是解决我的问题并返回初始状态的最佳方法。

Answer 1

您将需要使用选择器而不是从状态中删除数据。当您选择承运人时，您需要在商店中设置这是您正在使用的选择器，然后使用选择器进行过滤，但不要从商店中删除其他航类。

查看来自 Dan Abramov 的关于在 Redux 中使用选择器的链接。 https://egghead.io/lessons/javascript-redux-colocating-selectors-with-reducers?course=building-react-applications-with-idiomatic-redux