Javascript 如何重构此Redux connect代码？

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

但是，我找不到带有connect anywhere的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 />)

以下是我需要的：

@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 />)

异步连接(
一些东西，
连接（更多内容）
)（道具=>）

---

我只是不知道如何实际编写它。

您可以使用Dan在redux中提供的

compose

函数

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

...

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

从'redux'导入{compose}；
从'react redux'导入{connect}；
...
导出默认组合(
异步连接（…），
连接（…）
)（道具=>）；

compose

从右向左应用

---

有趣的是，这本质上是使用类所使用的decorator语法的替代方法。您可以对类使用相同的方法

---

还有一点建议/提示

React严重依赖于功能概念。它帮了我很大的忙，让我对其中的一些感到舒服。我强烈推荐以下免费在线书籍。你不必一直深入到单子的世界，我想说至少前6章会给你带来巨大的进步

---

非常有帮助，谢谢。你说这种方法也适用于类是对的，我想知道除了“更好的”语法之外，装饰器还有什么好处？我猜装饰器真正的“好处”是它们与它们所装饰的类的搭配。更容易了解类的其他行为。我对他们唯一的不满是，该功能仍在提案中，目前正在进行更新。因此，如果提案发生了变化，您的代码库将面临一些管理更新工作的风险。我认为compose不能以这种方式使用。即使是最基本的示例也会因类型错误而失败：

export default compose（function（）{return true}）

TypeError:（0，_reactRedux.compose）不是一个函数

My bad！您必须从

redux

导入，而不是

react redux

：）