1

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

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

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

屏幕一：

组件：Header, BodyTypeA; 调用API：apiA

屏幕 2：

组件：Header, BodyTypeB; 调用API：apiB

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

4

1 回答 1

2

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

我的理解是，API调用应该在reducer中将新ID存储在状态中时完成。

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

于 2016-11-01T08:52:33.303 回答