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 组件将通过在export语句中执行以下操作来增强所有其他组件:

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

导出默认的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?

导出默认的DataSync(connect(mapStateToProps，mapDispatchToProps)(SomeOtherComponent));

我可能在这里完全误解了这个概念，所以我非常感谢一些提示

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

编辑

进一步说明:

我的DataSync HOC将纯粹处理应用程序之间的数据同步，并且将是顶级组件.它将需要访问auth状态，并将所有其他组件的数据设置为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屋！