使用 i18n 的 useTranslation 和 redux 的 connect HOCs 导出组件

Question

我的应用使用了很长时间的 Redux，组件导出看起来像

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

我现在正在介绍 i18n 的翻译库，并且想使用 useTranslation 中包含的 HOC。

我尝试了几种不同的方法，发现 Redux 有一个 connect 功能，如果我理解正确的话，它应该结合 HOC，但是我无法让它工作。

export default connect(useTranslation(), connect(mapStateToProps, mapDispatchToProps))(MyComponent);

当我加载浏览器时显示：

Uncaught ReferenceError: process is not defined

我是不是漏掉了什么？

Answer 1

useTranslation 不是 HOC，你想要 withTranslation。看起来像这样：

export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(MyComponent));

或者，由于顺序无关紧要：

export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(MyComponent));

嵌套多个 HOC 可能难以阅读，因此使用 compose 实用函数可能更容易。 Redux 甚至包括一个：

import { compose, connect } from 'redux';

//...

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  withTranslation()
)(MyComponent);

使用 i18n 的 useTranslation 和 redux 的 connect HOCs 导出组件

Exporting component using i18n's useTranslation and redux's connect HOCs

javascript

reactjs

react-redux

i18next