如何重构这个Redux连接代码？

Question

我想在无状态组件（纯函数）中使用Redux connect和asyncConnect，因此我需要将这些类装饰器重构为常规函数调用。

但是，我找不到在任何地方都可以连接的asyncConnect示例。

这是我所拥有的：

@asyncConnect([{
  deferred: true,
  promise: ({ params, store: { dispatch, getState } }) => {
    if (!isLoaded(getState())) {
      return dispatch(loadUser(params.userID))
    }
  },
}])
@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

这是我需要的：

asyncConnect(
  someStuff,
  connect(moreStuff)
)(props => <div />)

我只是不知道该如何写。

Answer 1

您可以使用Dan在redux中提供的compose函数。

import { compose } from 'redux';
import { connect } from 'react-redux';

...

export default compose(
  asyncConnect(...),
  connect(...)
)(props => <div />);

从右到左应用compose 。

compose正式文件。

---

有趣的是，这实际上是使用与类一起使用的装饰器语法的替代方法。 您可以对类使用相同的方法。

---

和一点建议/技巧。

React在很大程度上依赖于功能概念。 使自己适应其中的一些功能对我有极大的帮助。 我强烈推荐以下免费在线图书。 您无需一直深入到Monad的世界，我想至少说前6章将为您提供坚实的基础。

https://github.com/MostlyAdequate/mostly-adequate-guide