React Redux 使用 HOC 和连接组件 [英] React Redux use HOC with connected component

问题描述

我正在进行我的第一个 React Native 项目.我想创建一个纯粹处理从 api 同步数据的 HOC.这将包装我所有的其他组件.

I am in the middle of my first React Native project. I would like to create a HOC that deals purely with syncing data from an api. This would then wrap all my other components.

如果我是正确的，我的 DataSync 组件将通过在导出语句中执行以下操作来增强所有其他组件:

If I am correct my DataSync component would enhance all other components by doing the following in the export statement:

export default DataSync(SomeOtherComponent);

我纠结的概念是 SomeOtherComponent 还依赖于 React Redux Connect 方法来检索其他 redux 状态.我的问题是如何同时使用两者?像这样吗?

The concept I am struggling with is that SomeOtherComponent also depends on the React Redux Connect method for retrieving other redux state. My question is how can I use both together? Something like this?

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

我可能完全误解了这里的概念，所以我真的很感激一些指点

I may have completely misunderstood the concept here so I would really appreciate some pointers

编辑

进一步解释:

我的 DataSync HOC 将纯粹处理应用程序之间的数据同步，并将成为顶级组件.它需要访问身份验证状态，并在 Redux 中为所有其他组件设置数据(在本例中为订单).

My DataSync HOC would purely handle the syncing of data between the app and would be the top level component. It would need access to auth state and would set the data in Redux (in this case orders) for all other components.

嵌套在 DataSync HOC 中的组件需要访问检索到的数据、路由，然后它们又会创建必须定期同步回服务器的状态(订单).

Components nested within the DataSync HOC need access to the retrieved data, routes and they in turn create state (orders) that must be synced back to the server periodically.

推荐答案

也许这就是你想要的:

DataSync.js

export default connect(mapStateToProps, mapDispatchToProps)(DataSync);

SomeOtherComponent.js

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

在您的子组件上也使用 connect.这是为什么

Use connect on your child components as well. Here is WHY

这篇关于React Redux 使用 HOC 和连接组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！