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。这是WHY

Answer 3

是的，connect也是HOC，您可以将它们任意嵌套，因为HOC会返回一个组件。

HOC(HOC(...(Component)...))没问题。

但是，我认为您可能需要的是connect(...)(DataSync(YourComponent))而不是DataSync(connect(...)(YourComponent))，以便DataSync也可以根据需要访问state / props。这实际上取决于用例。

Answer 4

我有一个非常简单的用例。我想将我的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));

此线程有两个答案。他们全都帮了我只是放下对我而言实际有效的方法。

Answer 5

我使用并喜欢@The Reason提到的相同方法。这里唯一的问题是，如果你映射你的行为，你就不会有dispatch（）。

如果有人遇到同样的问题，我设法如何使其工作的方式如下。

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

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

withPreFetch(firstLoadAction, ConnectedComponentWithActions)是HOC接受要发送的行动。

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

5 个答案: