HOC with wrapped component with asyncConnect

Hi! Is it possible to make HOC which wraps asyncConnect’ed component. I can’t do this. Because all asyncItems, mapStateToProps and mapDispatchToProps of the Component seem to be dropped.

Say, I’ve got the Component:

...
const mapStateToProps = state => ({
    ...
});

const asyncItems = [{
    key: 'myItems',
    promise: ({router, store: { dispatch, getState }}) => {}
}];
const enhancer = createHOC();

module.exports = enhancer(asyncConnect(
    asyncItems,
    mapStateToProps,
    mapDispatchToProps,
)(Component));

And HOC itself has the asyncConnect enhancer 😃 Is it possible or do I have to abandon this idea at all?

[gerhardsletten]

After upgrading to RR v4 and the latest version of redux-connect, I think that the solution for both data-fetching and code-splitting is about organizing you code. The route-level component can’t both be HOC’ed with redex-connect and be lazy-loaded, so you should do data-fetching in the route-level component and move lazy-loading into a child-component. Can’t think of any other way to do this, since you don’t have a getComponent function with react-router-config, without writing you own helper that both lazy-load and do data-fetching. Maybe this should be mentions in the README.md to save people from spending time looking into this?

[gerhardsletten]

Hi, this is an example of a controller. You just move the visuals and heavy dependencies into its own component, and just hot-load it from the controller, but keep the asyncConnect hoc on the controller so redux-connect will discover it through react-router-config

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { asyncConnect } from 'redux-connect'
import loadable from 'loadable-components'

import { isLoaded as isPageLoaded, load as loadPage } from 'redux/modules/page'

const Page = loadable(() =>
  import(/* webpackChunkName: "page" */'./Page')
)

@asyncConnect([
  {
    promise: ({ store: { dispatch, getState }, location: { pathname } }) => {
      const promises = []
      if (!isPageLoaded(getState(), pathname)) {
        promises.push(dispatch(loadPage(pathname)))
      }
      return Promise.all(promises)
    }
  }
])
@connect(state => ({
  page: state.page.data,
  error: state.page.error
}))
export default class PageContainer extends Component {
  render() {
    return <Page {...this.props} />
  }
}