react-router-redux 简单例子

reducer与按需加载组件的时候，一并加载对应的state，具体流程就不多说了，看代码！

reducer

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

export const makeRootReducer = asyncReducers => {
  return combineReducers({
    routing: routerReducer,
    ...asyncReducers
  })
}

export const injectReducer = (store, {key, reducer}) => {
  if(!store.asyncReducers[key]) {
    store.asyncReducers[key] = reducer;
    store.replaceReducer(makeRootReducer(store.asyncReducers));
  }
}

store

import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
import reducer, { makeRootReducer } from './reducer'

export default (initialState = {}, history) => {

    const middleware = [thunkMiddleware, routerMiddleware(history)];
    const enhancers = [];
    const store = createStore(
        makeRootReducer(),
        initialState,
        compose(
            applyMiddleware(...middleware),
            ...enhancers
        )
    );
    return store;
}

router

import React, { Component } from 'react'
import { Router, Route, Redirect } from 'react-router'
const moduleRoute  = require.context('../view', true, /router$/) //获取view视图下，所有router文件
const router = store => {
    return <Router>
                <Route path="/">
                    {
                        moduleRoute.keys().map(key => {
                            return moduleRoute(key).default(store)
                        })
                    }
                    <Redirect from='*' to='/'  />
                </Route>
            </Router>
}

export default router

入口文件app.js

import ReactDOM from 'react-dom'
import { Router, hashHistory } from 'react-router'
import React from 'react'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'
import createStore from '...上面的store'
import router from '...上面的router'

const store = createStore({}, hashHistory);
store.asyncReducers = {};
const history = syncHistoryWithStore(hashHistory, store);
ReactDOM.render((
    <Provider store={store}>
        <Router history={history}>
          { router(store) }
        </Router>
    </Provider>
), document.getElementById("root"))

在view层级下创建一个test文件夹来编辑一下流程

在test/ index.jsx 中简单编辑下

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

class Test extends Component {
    render() {
        const { value } = this.props;
        return <h1>{ value }</h1>
    }
}

const mapStateToProps = state => {
    return { ...state.test }
}

const mapDispathToProps = dispatch => {
    return {

    }
}

export default connect(mapStateToProps, mapDispathToProps)(Test);

reducer

const initState = { value: 'value' }
export default (state = initState, action) => {
    return state;
}

router

import { Route } from 'react-router'
import { injectReducer } from '...最上面定义的reducer'
export default store => {
    return <Route
        path='test' 
        getComponent={
            (nextState, cb) => {
                import('../'/* webpackChunkName: 'Test' */)
                .then(module => {
                    injectRoducer(store, {key: test, reducer: require('../redux/reducer')});
                    cb(null, module.default);
                })
            }
        }/>
}

执行，在未加载该页面之前，store.state = { routing… };
进入test页面的时候， store.state = { routing…, test: { value: ‘value’ } }