John Doe John Doe - 1 year ago 105
React JSX Question

How to refactor this Redux connect code?

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:

deferred: true,
promise: ({ params, store: { dispatch, getState } }) => {
if (!isLoaded(getState())) {
return dispatch(loadUser(params.userID))
state => ({ // eslint-disable-line
error: state.publicData.user.error,
loading: state.publicData.user.loading,
{ initializeWithKey })
export default class UserProfile extends Component {

Here's what I need:

)(props => <div />)

I just have no idea how to actually write it.

Answer Source

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

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


export default compose(
)(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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download