John Doe John Doe - 3 months ago 28
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:

@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

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