重新选择 CreateStructuredSelector 的属性差异答案

【问题标题】：reselect CreateStructuredSelector difference in properties重新选择 CreateStructuredSelector 的属性差异
【发布时间】：2017-08-24 10:40:07
【问题描述】：

也许这不一定是重选题

const makeSelectError = () => createSelector(
  selectGlobal,
  (globalState) => globalState.get('error')
);

在重新选择中我们使用

const mapStateToProps = createStructuredSelector({
  error: makeSelectError(),
});

为什么我们不能像下面这样使用？

const makeSelectError = createSelector(
      selectGlobal,
      (globalState) => globalState.get('error')
    );

并在重新选择中使用如下所示

const mapStateToProps = createStructuredSelector({
  error: makeSelectError,
});

我的代码是否有任何问题/缺点，或者这是一种标准做法？

【问题讨论】：

标签： reselect react-boilerplate

【解决方案1】：

第二种方法不仅有效且正确，它还有其他优点。

使用您提供的第一个 sn-p：

const makeSelectError = () => createSelector(
  selectGlobal,
  (globalState) => globalState.get('error')
);

makeSelectError 是一个工厂函数，每次调用它都会返回一个新的唯一选择器。

这意味着每次调用一个简单的mapStateToProps 函数时，都会创建一个新的选择器，并再次计算选择器的结果。这意味着您将失去reselect 的主要优势，即记忆化。

因此，对于简单的情况，您只需执行以下操作：

const getSomePieceOfState = state => state.someArea.someDetail;
const getAnotherPieceOfState = state => state.anotherArea.anotherItem;

const getSomeCombinedState = createSelector(
  getSomePieceOfState,
  getAnotherPieceOfState,
  (somePiece, anotherPiece) => somePiece + anotherPiece
);

const mapStateToProps = state => ({
  someProp: getSomeCombinedState(state)
});

注意。通常在选择器名称前加上 get 前缀，在选择器工厂（返回选择器的函数）名称前加上 makeGet。

有时创建选择器工厂是必要的，但如果您不想创建依赖于不在状态中的属性的选择器。

您可以在此处阅读更多相关信息 Accessing React Props in Selectors

【讨论】：

【解决方案2】：

你在第二个例子中做的绝对正确。这是标准做法。

无需将makeSelectError 包装到另一个函数。

【讨论】：