如何在Redux应用程序中动态/任意创建其他Reducer或避免获取竞争条件

Question

<小时/> 的更新

此处提供的Redux示例可能对其他人有益： https://github.com/reactjs/redux/tree/master/examples/tree-view

<小时/> 的更新

感谢您的评论。我仍在调查此事，但我目前正在探索类似于@Chase DeAnda建议的方法。但是，我使用的对象的密钥等于父组件，而值等于以前是子组件的reducers的对象，而不是数组。这种方法似乎有效，但它仍然是WIP。缺点是父组件的深度嵌套减速器。

这是Redux文档中讨论的模式： https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

上面的链接还讨论了在其他更好的设计模式中解决嵌套问题的方法。我正在使用此文档来获得我想要的结果。

一旦我走得更远，我会用我的结果更新这个问题＆amp;也许我们从那里继续。希望结果对类似情况下的其他用户有用。再次感谢！

原始问题

我无法为以下使用获取请求创建竞争条件的场景找到设计建议：

1. 可以由用户动态创建父组件。
2. 每位家长都有5个孩子，他们都会提取请求。这些孩子都有自己的减速器来促进这一点。
3. 如果我在应用中创建新的父级，我需要创建新的子级缩减器或取消之前活动父级的所有飞行请求。发起对当前活动父母的新请求。

有没有人遇到类似的情况？我已经阅读并尝试了Dan的回复代码：

https://stackoverflow.com/a/33044701/4240734

和

How to avoid race conditions when fetching data with Redux?

但上述情景似乎有所不同。首先，我想根据非路由事件更改活动切片减少器。在这种情况下，我无法访问商店而不违反设计原则。此外，即使我有权访问商店，我也不知道replaceReducer正在提供我想要的行为。

我还在这里回顾了Dan Abramov的Egghead教程：

https://egghead.io/lessons/javascript-redux-avoiding-race-conditions-with-thunks

事实上，我已经实施了他的解决方案，以避免儿童组件中的竞争条件。在父组件之间切换时会出现额外的复杂程度。

我愿意接受任何建议。也许我的设计模式是关闭的，所以不要介意为架构提供更好的解决方案。

TLDR;

1. 对于页面上的给定路径，我有任意数量的父组件。
2. 每个父组件都有一个特定数量的子组件，它们都需要自己的reducer来管理使用Fetch启动的req_sent，req_succeeded，req_failed（不是xhr或其他具有良好支持的中止选项的选项）。
3. 如果用户创建了更多父组件（例如，针对不同的主题），则需要执行以下两项操作之一：
   1. 为新创建的父项的新创建的子组件创建并添加更多子reducer并将其添加到商店。 OR
   2. 以前活动的父级的所有正在进行的请求都需要中止（再次使用获取请求），新的活动父组件允许新的子请求出去并填充现有的子级缩减器。

否则，我最终会遇到来自儿童减速器的竞争条件，这些减速器填充了错误父组件的数据。

Answer 1

如果一次只有一个活动的父组件，您只需将父组件的某种ID附加到每个单独的提取操作。

因此，如果调度过时父组件的成功操作，例如：

{ type: 'CHILD_FETCH_SOMETHING_SUCCESS', payload: { parentID: 'someParent123', data: { ... }} }

..你会检查此时someParent123仍然是一个活跃的父组件。如果没有，数据可以被丢弃，状态不会改变。