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’ } }
react-router-redux的更多相关文章
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- [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 ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [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 ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
随机推荐
- 从postgres数据库逆向生成hibernate实体类
最近整理 一个项目,原先的项目是用的oracle,然而新的项目要用postgresql.将oracle数据库导出之后,通过powerdesigner整理,导出postgresql的脚本,然后在post ...
- 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 ' ...
- TWaver3D直线、曲线、曲面的绘制
插播一则广告(长期有效) TWaver需要在武汉招JavaScript工程师若干 要求:对前端技术(JavasScript.HTML.CSS),对可视化技术(Canvas.WebGL)有浓厚的兴趣 基 ...
- tabs标签页的数据缓存
一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上, 这样如果数据量太大的话会渲染很久, 我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请 ...
- springMVC model传对象数组 jq 获取
这个问题网上没有什么解答,有两种可能性: 一.我使用的这种方法实在太蠢了正常人都不会去这个搞: 二.我太蠢了.... 以下解决方案 //后台代码如下 public String plant(Model ...
- Mybatis 缓存策略
听极客学院笔记 使用mybatis的缓存需要以下三步 一.在mybatis的config.xml中开启缓存 <settings> <setting name="cacheE ...
- Python2和Python3共存安装robotframework
1.下载Python2.Python3安装包 https://www.python.org/ 2.下载pip.tar.gz https://pypi.python.org/pypi/pip#downl ...
- Ext.js双击事件
/** * 联系人列表panel */ Ext.define('Op.OpBill.OpBillCustLinkGridPanel', { extend: 'Ext.grid.Panel', id: ...
- LR性能测试问题解决方法
一.Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set the ...
- Jquery跨域请求
在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaSc ...