React Redux 使用 HOC 和连接组件

IT技术 javascript reactjs react-native redux react-redux
2021-05-08 09:17:03

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

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

export default DataSync(SomeOtherComponent);

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

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

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

编辑

进一步解释：

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

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

4个回答

这是一个简单的例子，它是如何工作的

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链接

可能这就是你想要的：

数据同步.js

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

SomeOtherComponent.js

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

也可用于connect您的子组件。这是为什么

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

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

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

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

该线程中有两个许多答案。他们都帮助了我。只是记下在我的情况下实际有效的内容。

其它你可能感兴趣的问题
上一篇来自挤出机热敏电阻的 Anet A8 读数为 739°C！ 下一篇create-react-app error import type * as PrettyFormat from './types' in Pretty-format