javascript - 如何编写可重用和模块化的 Redux 选择器？

Question

我是 Redux 的新手，正在尝试弄清楚如何充分利用它。

在为应用程序的模块编写选择器时，应该将状态树的哪一部分传递给选择器，以便选择器既可重用又模块化？

例如，给定下面的代码，用类似于 stateShapeExample 的状态形状编写 selectModuleItemsById 的好方法是什么？

let stateShapeExample = {
    module: {
        items: {
            firstItemId: {...},
            secondItemId: {...},
            ...
        }
    }
}

const selectModuleRoot = (state) => state.module;

// First Option: starts from the module root
const selectModuleItemById = (state, id) => state.items[id];

// Second Option: starts from the global root
const selectModuleItemById = (state, id) => state.module.items[id];

// Something Else: ???
const selectItemById = (state, id) => state[id];

Answer 1

简短的回答是它非常棘手。

我所见过的最好的文章是 Randy Coulman 关于模块化选择器的系列文章:

• Encapsulating the Redux State Tree
• Redux Reducer/Selector Asymmetry
• Modular Reducers and Selectors
• Solving Circular Dependencies in Modular Redux

一般的总结似乎是让“模块缩减器”编写知道如何从自己的状态中挑选数据片段的选择器，然后根据模块/切片的安装位置在应用程序级别“全局化”它们在状态树中。然而，由于模块本身可能需要使用选择器，您可能必须将注册/设置过程移到单独的文件中以避免循环依赖问题。