[Feature Request] Support react-router async features

[avocadowastaken]

Greeting, thanks for great lib that helps me a lot to integrate exist project with redux. But as project grows - new challenges comes.

So, react-router has API to lazy-load routes, which is great and react-router-redux has no problem with it. Implementation was easy, but as I wanted to track loading process of Lazy Components, I faced the problem.

After few minutes I found solution:

// First - Create class decorator

function RouterRoot() {
    return Child => {
        return class RouterChangeHandler extends Component { // TODO: (umidbekkarimov) 4/21/16 - wrap with hoist-non-react-statics
            static displayName = `${Child.displayName || Child.name}RouterChangeHandler`

            static contextTypes = {
                store: PropTypes.any
            };

            componentWillMount() {
                this.context.store.dispatch({
                    type: '@@router/LOCATION_CHANGE_SUCCESS', props: this.props
                });
            }

            componentWillReceiveProps(nextProps) {
                this.context.store.dispatch({
                    type: '@@router/LOCATION_CHANGE_SUCCESS', props: nextProps
                });
            }

            render() {
                return (
                    <Child {...this.props}/>
                );
            }
        };
    };
}

// Then use it on Root Component

@RouterRoot()
export class AppRoot extends Component {
    render() {
        return (
            <div className="root">{this.props.children}</div>
        );
    }
}

// Assure that AppRoot - actually at root

export default {
    path: '/',

    component: AppRoot,

    indexRoute: IndexPageContainer,

    childRoutes: [
        // async routes
    ]
};

---

As you see implementation is pretty easy and react-router will take care of all asynchronous problems.

So what features it can give:

• Tracking route loading state - state.routing.route.isLoading
• Tracking route params change - state.routing.route.params

What problems it can create:

• Multiple dispatches of SUCCESS action - need to check for props changes before dispatching action
• Didn't test it on isomorphic/universal apps - so it can create lot's of pain there (theoretically)

  ---

EDIT:

Here logs screenshot of initial loading

[timdorr]

Async routes are really out of scope of this library. It's main function is for syncing up when using Dev Tools. But you should let Router manage its state in production.

[timdorr]

Dan posted a good writeup on SO today on how you should keep app state and location/router state separate: http://stackoverflow.com/questions/36722584/how-to-sync-redux-state-and-url-hash-tag-params/36749963#36749963