如何重构这个Redux连接代码

How to refactor this Redux connect code?

本文关键字：Redux 连接 代码 何重构 重构      更新时间：2023-09-26

我想在无状态组件(纯函数)中使用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 />)

我只是不知道该怎么写

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

import { compose } from 'redux';
import { connect } from 'react-redux';
...
export default compose(
  asyncConnect(...),
  connect(...)
)(props => <div />);

compose从右向左应用

compose的官方文档。

作为一个有趣的问题，这本质上是使用与类一起使用的装饰器语法的另一种方法。您可以对类使用相同的方法。

还有一点建议/提示。

React严重依赖于功能概念。它让我自己适应了其中的一些，对我帮助很大。我强烈推荐以下免费在线书籍。你不需要一直深入Monads的世界，我想说至少前6章会对你的前进有很大的帮助。

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

相关文章：