How to refactor this Redux connect code?

Question

I want to use Redux connect and asyncConnect in a stateless component (pure function), so I need to refactor these class decorators into regular function calls.

However, I cannot find an example of asyncConnect with connect anywhere.

Here's what I have:

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

Here's what I need:

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

I just have no idea how to actually write it.

Answer 1

You could use the compose function that Dan provides in redux.

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

...

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

compose gets applied from right to left.

Official documentation on compose.

---

As a matter of interest this is essentially the alternative approach to using the decorator syntax you are using with classes. You could use the same approach with classes.

---

And a bit of advice/tip.

React leans heavily on functional concepts. It helped me immensely by getting myself comfortable with some of these. I highly recommend the following free online book. You need not go all the way down into the world of Monads, I would say at least the first 6 chapters will do you a massive solid going forward.

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