react-redux初探1

先简单说一下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