React Redux将HOC与连接组件一起使用

Question

我正处于我的第一个React Native项目中.我想创建一个纯粹处理来自api的同步数据的HOC.然后这将包装我的所有其他组件.

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

export default DataSync(SomeOtherComponent);

我正在努力的概念是,SomeOtherComponent还取决于React Redux Connect方法来检索其他redux状态.我的问题是如何将两者结合使用？像这样的东西？

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

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

编辑

进一步解释:

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

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

Answer 1

这是一个简单的例子

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))

有用的HOC链接

Answer 2

可能这就是你想要的:

DataSync.js

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

SomeOtherComponent.js

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

也用于connect您的孩子组件.这是为什么

Answer 3

是的,connect也是HOC,因为HOC返回一个组件,你可以将它们任意嵌套.

HOC(HOC(...(Component)...)) 没关系

但是,我认为您可能需要的是,connect(...)(DataSync(YourComponent))而不是DataSync(connect(...)(YourComponent))这样,如果需要,DataSync也可以访问state/ props.这实际上取决于用例.

Answer 4

我有一个非常直接的用例。我想将我的 HOC 与 redux store 连接起来。简而言之，我想用 reduxconnect方法包装我的 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));

该线程中有两个答案。他们所有人都帮助了我。只是写下对我的案例实际有效的内容。