先简单说一下redux和react是怎么配合的。react-redux提供了connect和Provider两个好基友，它们一个将组件与redux关联起来，一个将store传给组件。组件通过dispatch发出action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件，此时组件的props也就跟着变化
Provider中传入 store
Store中配置了 action 和 redux
组件中 点击响应 触发 action
Action回调到 store中改变 state状态
State 状态改变 通知 组件 重新render—-> shouldComponentUpdate—-> componentWillUpdate –> render —> componentDidUpdate
如果只使用redux，那么流程是这样的：
component –> dispatch(action) –> reducer –> subscribe –> getState –> component 用了react-redux之后流程是这样的：
component –> actionCreator(data) –> reducer –> component
Store 有 dispatch action功能 subscribe监听状态变化功能 getState获取state功能
replaceReducer功能
combineReducers 接收 state 和 action组合
Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过context获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state，并用subscribe监听state的变化，然后用getState获取变化后的值。但是并不推荐这样做，它会让数据流变的混乱，过度的耦合也会影响组件的复用，维护起来也更麻烦。
connect –connect(mapStateToProps, mapDispatchToProps, mergeProps, options) 是一个函数，它接受四个参数并且再返回一个函数–wrapWithConnect，wrapWithConnect接受一个组件作为参数wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。
所以它的完整写法是这样的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)
2、从 react.js，redux，react-router 中引入所需要的对象和方法。
import React, {Component, PropTypes} from ‘react’; import ReactDOM, {render} from ‘react-dom’; import {Provider, connect} from ‘react-redux’; import {createStore, combineReducers, applyMiddleware} from ‘redux’; import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from ‘react-router’; 3、根据需求创建顶层ui组件，每个顶层ui组件对应一个页面。
4、创建actionCreators和reducers，并用combineReducers将所有的reducer合并成一个大的reduer。利用createStore创建store并引入combineReducers和applyMiddleware。
5、利用connect将actionCreator，reuder和顶层的ui组件进行关联并返回一个新的组件。
6、利用connect返回的新的组件配合react-router进行路由的部署，返回一个路由组件Router。
7、将Router放入最顶层组件Provider，引入store作为Provider的属性。
8、调用render渲染Provider组件且放入页面的标签中。
可以看到顶层的ui组件其实被套了四层组件，Provider，Router，Route，Connect，这四个组件并不会在视图上改变react，它们只是功能性的
1、 App.jsx
render( {route} , document.body.appendChild(document.createElement(‘div’)) );
2、路由配置
import React, {Component, PropTypes} from ‘react’; import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from ‘react-router’;
import index from ‘../Component/index’; //销售录入
class Roots extends Component { render() { return (
{this.props.children} ); } }模块常量获取 const applyDeposit = (location, cb) => { require.ensure([], require => { cb(null, require(‘../Component/applyDeposit’).default) },’applyDeposit’) }
const RouteConfig = ( //首页 //帮助中心 //销售记录 //选择商品 //余额 //申请提现 //提现记录 );
export default RouteConfig;
3、store配置
import {createStore, combineReducers, applyMiddleware} from ‘redux’; import * as reducer from ‘../Reducer/Index’; import thunk from ‘redux-thunk’;
//创建一个 Redux store 来以存放应用中所有的 state，应用中应有且仅有一个 store。
var store = createStore( combineReducers(reducer), applyMiddleware(thunk) );
export default store;
4、reducer配置
//记录商品列表页数据状态 export const producRecord = (state = {}, action = {}) => { switch(action.type){ case RECORD_STATE: return Object.assign({},state,action); case SAVE_PRODUCT_LIST: state[‘productList’] = […action.productList]; return state; //记录商品列表数据，但是不触发组件更新 case NEW_PRODUCT_DATA: state[‘productData’] = […action.productData]; return state; default: return state } }
//销售记录页面数据 export const saleRecord = (state = Immutable.fromJS({}) , action = {}) => { switch(action.type){ case DELETE_ITEM: return Immutable.Map({index:action.index}) default: return state; } }
5、对应action声明
export const RECORD_STATE = ‘RECORD_STATE’ export const SAVE_PRODUCT_LIST = ‘SAVE_PRODUCT_LIST’ export const DELETE_ITEM = ‘DELETE_ITEM’
//销售列表页删除单个item export const deleteItem = index => { return { type:DELETE_ITEM, index } } //记录单个商品列表状态 export const recordState = (id,chooseState,num,index) => { return{ type:RECORD_STATE, id, chooseState, num, index } }
//将商品列表保存在store中，组件再次渲染时调用 export const saveProductlist = productList => { return{ type:SAVE_PRODUCT_LIST, productList } }
1、如何将 action 和 reducer联系在一起==========================connnect(reducer,action)
Reducer 中变量 是 state 和 action的结合，并且可以从 state中获取 reducer中定义变量
形式1 //mapStateToProps and mapDispatchToProps return connect(state => { //将顶层组件与模版绑定后return回去，配置路由的时候用的就是和redux绑定的组件，所以其实每个路由匹配的都是同一个组件，只不过这个组件的内容不同 let {producRecord, saleRecord,requestData, testData} = state; return { state: state[‘fetchData’], producRecord , saleRecord , requestData , } }, action)(Index); //连接redux
形式2
import { bindActionCreators } from ‘redux’;
//让 action类中所有变量集合 为 readCreators import * as readCreators from ‘./actions/read’;
目的是 将 store中 state和 我们的props绑定，然后我们可以直接通过 props来获取 state中的 变量
那么 如何定义store中的 state变量呢???????????????????????????????? const mapStateToProps = state => { const { read } = state; return { read }; }; 目的将 我们的action和 dispatch绑定，让后可以 直接 调用action中方法，而不需要再dispatch
const mapDispatchToProps = dispatch => { const readActions = bindActionCreators(readCreators, dispatch); return { readActions }; };
export default connect(mapStateToProps, mapDispatchToProps)(App);
Connetion定义
connect –connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数，它接受四个参数并且再返回一个函数–wrapWithConnect，wrapWithConnect接受一个组件作为参数wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。
所以它的完整写法是这样的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)
mapStateToProps(state, [ownProps])：
mapStateToProps 接受两个参数，store的state和自定义的props，并返回一个新的对象，这个对象会作为props的一部分传入ui组件。我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会触发mapStateToProps function mapStateToProps(state) { return { todos: state.todos }; } mapDispatchToProps(dispatch, [ownProps])：
mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入ui组件。如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的
2、如何在action中 进行网络请求，以及返回值 如何传入到 redux中==== 3、Redux中 如何更新 state状态================================== 4、State状态 如何触发 component组件更新
首先通过 npm 安装：
$ npm install –save react-router 然后使用一个支持 CommonJS 或 ES2015 的模块管理器，例如 webpack：
// 使用 ES6 的转译器，如 babel import { Router, Route, Link } from ‘react-router’
参考链接 https://github.com/bailicangdu/react-pxq
https://segmentfault.com/a/1190000007642740
