Javascript React Redux与连接的组件一起使用HOC 我在我的第一个反应本土化项目的中间。我想创建一个专门处理从api同步数据的HOC。这将包装我的所有其他组件

如果我是正确的，我的

DataSync

组件将通过在export语句中执行以下操作来增强所有其他组件：

导出默认数据同步（SomeOtherComponent）

我正在努力解决的概念是，
SomeOtherComponent
还依赖于React-Redux-Connect方法来检索其他Redux状态。我的问题是如何将两者结合使用？像这样的

导出默认数据同步（connect（mapStateToProps，mapDispatchToProps）（其他组件））

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

编辑

进一步解释：

我的DataSync HOC将纯粹处理应用程序之间的数据同步，并将成为顶级组件。它需要访问auth state，并将所有其他组件的数据设置为Redux（在本例中为orders）

嵌套在DataSync HOC中的组件需要访问检索到的数据、路由，然后它们会创建必须定期同步回服务器的状态（订单）。
是的，
connect
也是
HOC
，您可以任意嵌套它们，因为
HOC
返回一个组件

HOC（HOC（…（组件）…）
正常


但是，我认为您可能需要的是
connect（…）（DataSync（YourComponent））
而不是
DataSync（connect（…）（YourComponent））
，这样
DataSync
也可以在需要时访问
状态
/
道具。这实际上取决于用例。
这里有一个简单的例子，说明它是如何工作的

const AppWrapper = MainComponent =>
  class extends Component{
    componentWillmount(){
      this.props.fetchSomething()
    }
    componentDidUnmount(){
      this.props.push('/')
    }
    render(){
      return (
        <div>
          {this.props.fetchedUsers === 'undefined' ? 
            <div> Do something while users are not fetched </div> :
            <MainComponent {...this.props}/>}
        </div>
      )
    }
  }



const App = ({users}) => {
  // just example, you can do whatever you want
  return <div>{JSON.stringify(users)}</div>
};

// mapStateToProps will be in HOC -> Wrapper
// mapDispatchToProps will be in HOC -> Wrapper

/* you may use DataSync as you want*/
export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App))

const-AppWrapper=main组件=>
类扩展组件{
组件willmount（）{
this.props.fetchSomething（）
}
componentDidUnmount（）{
this.props.push（“/”）
}
render（）{
返回(
{this.props.fetchedUsers==='undefined'？
在未获取用户时执行以下操作：
}
)
}
}
常量应用=（{users}）=>{
//举个例子，你想做什么就做什么
返回{JSON.stringify（用户）}
};
//mapStateToProps将位于HOC->Wrapper中
//mapDispatchToProps将位于HOC->Wrapper中
/*您可以根据需要使用DataSync*/
导出默认连接（mapStateToProps、mapDispatchToProps）（AppWrapper（App））

有用的链接可能是这是您想要的：

DataSync.js

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

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

SomeOtherComponent.js

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

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

在子组件上也使用
connect
。下面是我使用的方法，我喜欢上面提到的原因。这里唯一的问题是，如果映射操作，则无法使用dispatch（）

如果有人面临同样的问题，我是如何让它工作的，如下所示

const ConnectedComponentWithActions = connect(
  () => { return {}; },
  { myAction },
)(ViewComponent);

export default connect(
  state => state,
  null,
)(withPreFetch(firstLoadAction, ConnectedComponentWithActions));

其中，
withPreFetch（firstLoadAction，ConnectedComponentWithActions）
是接受要分派的操作的HOC。
我有一个非常直接的用例。我想将我的HOC连接到redux商店。简而言之，我想用redux
connect
方法包装我的HOC

// The HOC
const withMyHoc = (ReduxWrappedComponent) => props => <ReduxWrappedComponent {...props} />

// redux props
const mapStateToProps = (state) => ({});
const mapDispatchToProps = (dispatch) => ({});

// This is important
export default (WrappedComponent) => 
connect(
  mapStateToProps, 
  mapDispatchToProps
)(withMyHoc(WrappedComponent));

//HOC
const with myhoc=（reduxrappedcomponent）=>props=>
//重演道具
常量mapStateToProps=（状态）=>（{}）；
常量mapDispatchToProps=（调度）=>（{}）；
//这很重要
导出默认值（WrappedComponent）=>
连接(
MapStateTops，
mapDispatchToProps
)（使用MyHoc（WrappedComponent））；

这条线索有两个答案。他们都帮助了我。只是写下在我的案例中实际起作用的东西。
是的，应该起作用。也许你也可以看到：谢谢你的回复。因此，从本质上说，我嵌套它们的方式决定了组件继承的数据？这就像任何其他组件关系一样有效？您能详细说明一下您的问题吗？DataSync仅在嵌套在connect中时从connect继承。每个嵌套HOC1继承自每个外部HOC2,3,4。。在它上面。HOC3（HOC2（HOC1））现在HOC1继承自HOC2和HOC3。你能用一个连接修饰符来代替这个语法吗？