React Redux 使用带有连接组件的 HOC

Posted 2023-02-22

【中文标题】React Redux 使用带有连接组件的 HOC

【英文标题】：React Redux use HOC with connected component

【发布时间】：2017-04-13 11:22:59

【问题描述】：

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

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

export default DataSync(SomeOtherComponent);

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

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

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

编辑

进一步解释：

我的 DataSync HOC 将纯粹处理应用程序之间的数据同步，并且是***组件。它需要访问 auth 状态，并在 Redux 中为所有其他组件设置数据（在本例中为订单）。

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

【问题讨论】：

是的，应该可以工作

也可以看看：Connect with HOC

【参考方案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链接

【讨论】：

你能用连接装饰器代替这种语法吗？

【参考方案2】：

也许这就是你想要的：

DataSync.js

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

SomeOtherComponent.js

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

在您的子组件上也使用connect。这里是WHY

【参考方案3】：

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

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

---

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

【讨论】：

感谢您的回复。所以本质上，我嵌套它们的哪种方式决定了组件继承的数据？这就像任何其他组件关系一样工作？

您能否详细说明您的问题？如果 DataSync 嵌套在 connect 中，则仅从 connect 继承。每个嵌套的 HOC1 都继承自其上方的每个外部 HOC2、3、4..。 HOC3(HOC2(HOC1)) 现在 HOC1 继承自 HOC2 和 HOC3。

【参考方案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));

这个帖子有两个很多答案。他们都帮助了我。只是记下对我来说实际有效的方法。

【参考方案5】：

我使用并喜欢@The Reason 提到的相同方法。这里唯一的问题是，如果您映射您的操作，您将无法使用 dispatch()。

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

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

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

withPreFetch(firstLoadAction, ConnectedComponentWithActions) 是 HOC 接受要调度的操作。