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’ } }

react-router-redux的更多相关文章

  1. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  2. [Redux] Adding React Router to the Project

    We will learn how to add React Router to a Redux project and make it render our root component. Inst ...

  3. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  4. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  5. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  6. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  7. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  8. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  9. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  10. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

随机推荐

  1. 从postgres数据库逆向生成hibernate实体类

    最近整理 一个项目,原先的项目是用的oracle,然而新的项目要用postgresql.将oracle数据库导出之后,通过powerdesigner整理,导出postgresql的脚本,然后在post ...

  2. docker运行时设置redis密码并替换redis默认的dump.rdb

    docker run -itd --name test -p 6379:6379 -v /tmp/dump.rdb:/data/dump.rdb redis:4.0.8 --requirepass ' ...

  3. TWaver3D直线、曲线、曲面的绘制

    插播一则广告(长期有效) TWaver需要在武汉招JavaScript工程师若干 要求:对前端技术(JavasScript.HTML.CSS),对可视化技术(Canvas.WebGL)有浓厚的兴趣 基 ...

  4. tabs标签页的数据缓存

    一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上, 这样如果数据量太大的话会渲染很久, 我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请 ...

  5. springMVC model传对象数组 jq 获取

    这个问题网上没有什么解答,有两种可能性: 一.我使用的这种方法实在太蠢了正常人都不会去这个搞: 二.我太蠢了.... 以下解决方案 //后台代码如下 public String plant(Model ...

  6. Mybatis 缓存策略

    听极客学院笔记 使用mybatis的缓存需要以下三步 一.在mybatis的config.xml中开启缓存 <settings> <setting name="cacheE ...

  7. Python2和Python3共存安装robotframework

    1.下载Python2.Python3安装包 https://www.python.org/ 2.下载pip.tar.gz https://pypi.python.org/pypi/pip#downl ...

  8. Ext.js双击事件

    /** * 联系人列表panel */ Ext.define('Op.OpBill.OpBillCustLinkGridPanel', { extend: 'Ext.grid.Panel', id: ...

  9. LR性能测试问题解决方法

    一.Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set the ...

  10. Jquery跨域请求

    在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaSc ...