Question

使用许多高阶函数时，我发现React项目中的导出会变得非常混乱。例如，使用react-redux，react-router，redux-form和react-i18next看起来像：

const mapStateToProps = (state) => {
  return {
    // stuff
  }
};

const form = {
  // stuff
};

export default withRouter(withTranslation()(reduxForm(form)(connect(mapStateToProps)(Component)))));

这可能会变得很笨拙，并且跟踪和更改顺序可能会变得混乱。我创建了一个简单的单行包装出口：

wrapper.js

export default ({ component, wrappers }) => wrappers.reduce((acc, wrapper) => wrapper(acc), component);

要像这样使用：

import wrapper from '../path/to/wrapper.js';

/* rest of code */

const mapStateToProps = (state) => {
  return {
    // stuff
  }
};

const form = {
  // stuff
};

export default wrapper({
  component: Component,
  wrappers: [
    // The order of the wrappers can be changed by just changing
    // the order in which they appear here
    connect(mapStateToProps),
    reduxForm(form),
    withTranslation,
    withRouter,
  ],
});

到目前为止，这种方法已经奏效，我的问题是：这种方法是否存在任何可能不会立即显现出来的潜在问题？还有其他方法或最佳实践来管理React导出吗？

使用.reduce包装React导出

0 个答案: