规范化商店后，如何使用选择器访问 Redux 项目？答案

【问题标题】：How do I access Redux items using selectors after I've normalized my store?规范化商店后，如何使用选择器访问 Redux 项目？
【发布时间】：2017-08-18 11:58:06
【问题描述】：

在标准化 Redux 存储之后，我对应该如何使用选择器有点困惑。

我的商店有以下设置：

const DEFAULT_STATE = {
  allId: [],
  locations: {}
};

我的减速器如下：

handleActions({
  ['UPDATE']: (state, action) => {
    let newID = state.allId.length;

    const allId = [...state.allId, newID];
    const locations = {
      ...state.locations,
      [newID]: action.payload
    };
    return {allId, locations};
  }
}),
...

我想我的组件需要这样的东西：

function mapStateToProps(state) {
  return {
    share: callMySelector(state)
  };
}

但除了返回与最新 ID 关联的 location 之外，我看不到我的选择器会如何做任何事情。我认为规范化在这里也不是那么好 - 因为我最终不会在常规情况下通过 ID 进行搜索。

【问题讨论】：

标签： reactjs redux css-selectors react-redux

【解决方案1】：

选择器的强大之处在于它将过滤逻辑从使用数据的组件中移出，并将动作/reducer 移到可重用的函数中。您提到获取最新位置。根据 reducer 中的更新逻辑，我们只需创建一个选择器来抓取最后一项。

function selectLatestLocation(state) {
  const latestId = state.allIds[state.allIds.length - 1];

  return state.locations[latestId];
}

这假设位置数据是以位置 id 作为键的结构。

 {
   1: { id: 1, name: "USA" },
   2: { id: 2, name: "Europe" }
 }

在这种情况下，规范化数据的作用不大。但是假设需求发生了变化，现在我们只想要欧洲的位置。我们可以有另一个名为 europeIds 的状态属性，其中包含所有欧洲位置 ID。

function selectEuropeLocations(state) {
   return state.europeIds.map(id => state.locations[id]);
}

使用具有标准化 Redux 状态的选择器可以非常轻松地更改数据的过滤方式。现在就像你说的，有些情况可能不需要标准化。这真的取决于项目，以及正在完成的工作。但是，对于需要记忆或以不同方式过滤的数据，这绝对是值得的！

【讨论】：