Question

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

但是，我无法在任何地方找到asyncConnect的示例。

这就是我所拥有的：

realm.objects('Car')[0]

这就是我需要的：

@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
}

我根本不知道如何写它。

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.

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

还有一些建议/提示。

React严重依赖于功能概念。通过让自己对这些中的一些感到满意，这对我帮助很大。我高度推荐以下免费在线图书。你不需要一直走到Monads的世界，我会说至少前6章会给你带来巨大的进展。

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

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

1 个答案: