Question

在我对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搜索。

Answer 1

选择器的强大之处在于它将过滤逻辑从消耗数据的组件移开，并从动作/缩减器转移到可重用的功能。你提到了获取最新的位置。从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状态的选择器可以非常轻松地更改数据的过滤方式。就像你说的那样，有些情况可能不需要规范化。这完全取决于项目，以及正在完成的工作。但是，对于需要记忆或以不同方式过滤的数据来说，这绝对是值得的！

在我对商店进行规范化后，如何使用选择器访问Redux项目？

1 个答案: