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

Question

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

但是，我在任何地方都找不到带有 connect 的 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 从右到左应用。

Official documentation on compose.

有趣的是，这本质上是使用您在类中使用的装饰器语法的替代方法。您可以对类.

使用相同的方法

还有一点 advice/tip。

React 严重依赖函数式概念。通过让自己适应其中的一些，它极大地帮助了我。我高度推荐以下免费在线书籍。你不需要一直深入到 Monads 的世界，我想说至少前 6 章会让你向前迈进一大步。

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

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

How to refactor this Redux connect code?

javascript

ecmascript-5

ecmascript-6

reactjs

redux