Question

当我将更多选择器组合在一起时，我发现我正在重新排序定义选择器的位置。例如，

export const selectNav = state => state.nav;
export const selectPage = state => state.page;

export const selectNavAndPage = createSelector([
    selectNav,
    selectPage,
], (nav, page) => {

});

export const selectFoo = state => state.foo;

export const selectNavAndPageAndFoo = createSelector([
    selectNavAndPage,
    selectFoo,
], (navAndPage, foo) => {

});

这是一个简单的例子，但我无法在selectNavAndPageAndFoo下面定义selectNavAndPage。随着更多的选择器被组合并且选择器的选择器被组合，那么我需要确保在使用它们之前在顶部定义所有子选择器。

有没有办法创建这些选择器，这样排序并不重要？

Answer 1

我担心同样的问题，我创建了这个npm模块define-selectors。这是一个延迟选择器定义的模块，用于解决选择器定义问题的排序并为其添加其他功能。它尚未稳定，但我将在我的项目中使用它以使其稳定并得到改进。

有关详细信息，请转至github page并阅读自述文件和源文件。

Answer 2

我很确定这与ES6 const关键字的工作方式有关。对于const，变量在该行之前不存在，因此如果要引用const变量，则需要在变量声明之后编写该代码。使用var，所有变量都托管在范围的顶部。

因此，请使用var以便您可以不按顺序引用内容，或继续使用const并按照正确的使用和引用顺序定义每个函数。

Answer 3

如果你不介意多一点额外打字，这里有另一种方法，需要定义一个'cms'实用程序函数，它包装createSelector函数并利用函数提升：

import {createSelector} from 'reselect';

// create memoized selector
function cms(ctx, ...args) {
    if (!ctx.selector) ctx.selector = createSelector(...args);
    return ctx.selector;
}

// define the selectors out of order...

export function getBaz(state) {
    return cms(
        getBaz  // the function itself as context
        , getBar
        , bar => bar.baz
    )(state);
}

export function getBar(state) {
    return cms(
        getBar
        , getFoo
        , foo => foo.bar
    )(state);
}

export function getFoo(state) {
    return state.foo;
}

这并不像简单地按顺序定义选择器一样优雅，但也许其他人可以接受这个想法并对其进行改进。

如何在编写选择器时忽略重选选择器的排序

3 个答案: