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);
})
}
}/>
}