javascript - 为最初不在商店中的按需组件或组合 reducer 注入(inject) reducer

Question

我正在尝试构建一些模块化 SAP，以便许多团队可以单独工作。

基本上，我希望我的容器在容器、存储、 reducer 、saga 方面是独立的。

实际问题是(示例代码):

1. 我渲染一个基本模板:

<div> <a onClick={emitLoadUserListAction}>Load user list</a> <UserList/> </div>

此时，我为 UserList 使用 1 个缩减器来保留用户数组(一开始为空)。

假设我有一个传奇，等待此数据作为 json 中的用户列表出现。

商店: { UserList: [] }

一旦 saga 获取数据，就会发布修改当前存储的操作:

商店: { UserList: [{name:"john",counter:0},{name:"pepe",counter:0}] }

现在我的 UserList 组件可以列出它，因为我们有指向商店这一部分的 mapStateToProps。

this.props.userList.map ( (userData,i) => { return <User data={userData}> } ))

现在，如果用户组件只是一个普通组件，那么一切都可以正常工作。

但是，如果 User 实际上是一个容器，它希望自己工作，有自己的状态，但我还没有通过自己的 reducer 连接。我不想让他的 parent 来处理这件事。我希望用户是独立的，因为我可以使用重新选择选择器或类似的方法传递它在商店中的位置，或者我可以将数组中的索引作为 Prop 传递，这样我就可以成为选择器。这样我就可以将 store 注入(inject)到 props 中，但我不会有 reducer 。

我很确定你们中的许多人已经经历过这个问题，但我找不到正确的答案。

正如你所看到的，这个想法是有一个组件，它按需加载，而不是在最初的combineReducers中，不由其父级处理，只是渲染，并注入(inject)reducer以自行工作。

如果我可以有一种方法来按需加载其 reducer ，那么我就不会将数据存储在 UserList 中，但它将是 reducer 的组合。

提前非常感谢。

Answer 1

我将从my comment继续和 question that followed这样我就可以不受评论部分的限制进行扩展。

<小时/>

是的，我的库在商店中调用 replaceReducer ，以便用新包含的 reducer 替换 reducer 。为此，我提供了 Higher-Order Component (HOC)它将组件与其关联的 reducer 捆绑在一起，并在安装时执行替换。

界面看起来像这样:

export const MyBundledComponent = bundle(MyComponent, myReducer)

它工作的唯一要求是该组件安装在 Provider 内来自react-redux 。这使 HOC 可以访问 React's context 上的商店。与 connect HOC 的方式相同。但这实际上并不是一个非常令人望而却步的限制，因为大多数 redux 应用程序已经在树的顶部有一个 Provider 。

希望这有帮助。