如何在 react/redux 中调用 API 并从另一个孩子更新一个孩子

Question

我正在使用 redux、react、react-router 和 reselect。有一个包含两个组件的屏幕，Header 和Body。 Header中有一个组件可以选择一个ID。当一个新的 ID 被选中时，一个新的 action 会被调度来更新 redux 中 state 的 ID。

基于该 ID，应该有一个异步 API 调用从服务器加载元素并将其存储在状态中，然后应该触发屏幕渲染并在 Body 中显示元素。然后，加载的元素将通过重新选择从状态中提取出来。

实际情况比这要复杂一些，因为有许多不同的Body 组件具有不同的API 调用，而Header 组件只有一个。但它们可以被视为不同的屏幕。所以，例如：

屏幕 1：

组件：Header、BodyTypeA；调用API：apiA

屏幕 2：

组件：Header，BodyTypeB； API调用：apiB

我的理解是，API调用应该在reducer中存储新ID的状态下进行。但是，如果动作是由跨屏幕共享的组件调度的，如何确定正在显示哪个屏幕以及调用哪个 API？我可以以某种方式订阅Body 以更改 ID 并从屏幕内触发 API 调用吗？屏幕类型由 react-router 决定。减速器是否可以访问路由器以确定显示哪个屏幕？有处理这种情况的最佳做法吗？

Answer 1

看来你可能想多了。所以，一次做一件事：

我的理解是，API调用应该在reducer中存储新ID的状态下进行。

除非你使用 redux-loop 允许从 reducer 返回一个动作，否则你错了。原则上，reducer 不能调度任何动作，它们只会消耗它们。它是中间件层（或操作创建者），您可以在其中分派您的操作并可能调用您的 API。

但是，如果动作是由跨屏幕共享的组件调度的，如何确定正在显示哪个屏幕以及调用哪个 API？

要确定“您在哪里”，最好将路由信息保存在您的状态树中。由于您无论如何都在使用反应路由器，请考虑使用https://github.com/reactjs/react-router-redux 在您的状态树中公开路由信息，然后从您的中间件/动作创建者/选择器访问它。

我能否以某种方式在正文中订阅对 ID 的更改并从屏幕内触发 API 调用？

是的，从技术上讲，您可以订阅商店更改，但通常您不会也订阅 - 请参阅我的其他观点，希望它足够清楚。

屏幕类型由 react-router 决定。减速器是否可以访问路由器以确定显示哪个屏幕？

没有（通常）reducer 只能访问它们的状态片段，因此虽然您的 reducer 可能会对 react 路由器操作做出反应（如果您将使用 react-router-redux - 见上文）来存储您需要的路由详细信息，但原则上，应该由您的选择器和/或连接的组件从状态树中构造/提取给定组件所需的数据。

是否有处理这种情况的最佳实践？

我想使用 react-router-redux，引入一个中间件，该中间件将触发 API 调用以响应您的操作，并将调度包含从 API 返回的数据的连续操作。您将在 reducer 中处理该操作，将数据存储在树中。

还有一个随机提示，如果您有像 bodyTypeA、bodyTypeB 这样的组件，那么这些组件可以（甚至应该）保留信息（如果它们是 A 或 B）并将其传播给动作创建者。例如。如果您有一个名为 requestForId(ID) 的动作创建者，您可以将签名修改为 requestForId(ID, type) 并且在您的组件/回调中（无论何时调用该动作创建者），您不仅会传递 ID，而且还有类型，即 bodyTypeA 会用 requestForId(ID, 'A') 调用它。