为什么 React-boilerplate selector.js 导出调用 createSelector 的方法而不是直接导出选择器？

Question

我正在使用 react-boilerplate，它又使用 reselect。我注意到他们对 reselect 的使用与记录 reselect 的方式有点不同。事实上，如果不是因为我很确定框架的开发人员比我更了解他们在做什么并且他们的方法是有原因的，我会认为它正在破坏重新选择的优势。我试图更好地理解这个原因，所以我知道如何继续向样板添加选择器。我的困惑是 react-boilerplate 的导出方法调用 createSelector，而不是导出已经创建的选择器。

Reselect 的文档中有一个选择器文件，它导出已经创建的选择器，然后他们直接在 mapStateToProps 中调用这些选择器。所以像这样：

selector.js:

export const basicSelector = (state) => (state.basic.data);

export const fooSelector = createSelector(basicSelector, (state) => (state.get(foo));

export const barSelector = createSelector(basicSelector, (state) => (state.get(foo)));

在组件中：

function mapStateToProps(state) => ({
    foo: fooSelector(state),
    bar: barSelector(state),
});

然而，react-boilerplate 的选择器不是直接导出创建的选择器，而是导出调用 createSelector 的方法。所以像这样：

selector.js:

export const basicSelector = (state) => (state.basic.data);

export const fooSelector = () => {
  return createSelector(basicSelector, (state) => (state.get(foo)));
}

export const barSelector = () => {
  return createSelector(basicSelector, (state) => (state.get(foo)));
}

在组件中：

const mapStateToProps = createStructuredSelector({
  foo: fooSelector(),
  bar: barSelector(),
});

调用这些虚拟方法来创建选择器的动机是什么？我原以为 react-boilerplates 方法意味着如果我在不同的组件中重用一个选择器，那么每个组件都会有一个不同的选择器实例；这反过来意味着每个组件都必须在状态更改时计算选择器的结果，而不是一次完成，最终导致冗余计算。

正如我所说，我怀疑我遗漏了一些东西，因为我怀疑一个广泛使用的框架将无法正确使用重新选择。有人可以向我解释一下好处吗，why/if 我应该保持 react-boilerplate 的方法而不是按照重新选择文档显示的方式来做？

Answer 1

你在第二个例子中描述的不完全是一个选择器，而是一个选择器工厂。它创建并 returns 一个新的选择器。

有时 sharing selectors among different components 很棘手，因为每个组件可能会使用不同的参数调用选择器，从而在每次调用时使 reselect 缓存失效。

选择器工厂通过为每个连接的组件分配一个新的不同选择器来避免这个问题。

按照惯例，选择器工厂名称通常以 make 开头，如 makeSelectBar 或 makeGetBar.

为什么 React-boilerplate selector.js 导出调用 createSelector 的方法而不是直接导出选择器？

Why does React-boilerplate selector.js export methods which call createSelector instead of exporting selector directly?

javascript

reactjs

reselect

react-boilerplate