1.redux是react的状态管理工具，可以用来存放公共数据，因此也可用来作为组件间参数传递的方法。
2.组件传参，需要有一个公共的父组件。在父组件中引入Provider。通过Provider将store传递到子组件中，这样子组件就可以使用store中的数据。
在render函数中，将返回的HTML面板用 <Provider store={ store } ></Provider>包裹起来，这样就可以实现传递
main.js
1 import child1 .... //引入组件 2 import child2 .... //引入组件 3 4 import {Provider} from ‘react-redux‘ 5 .... 6 render(){ 7 return ( 8 <Provider store = {store}> //添加Provider标签 9 <div> 10 <child1>111</child1> 11 <child2>222</child2> 12 </div> 13 </Provider> 14 ) 15 } 16 ....
3. 创建redux所需要的基本的四个文件：Actions.js ActionTypes.js Store.js Reducer.js
1 Actions.js //定义Action函数,当有数据改变时，就产生了一个action，携带着新的payload和之前的type 2 3 var actionFunc = function(action){ 4 return { 5 type:action.type, 6 payload:action.payload 7 } 8 } 9 export default actionFunc 10 11 ActionTypes.js //定义action的类型，根据类型返回不同的state 12 13 export const ACTTYPE1 = ‘add1‘ 14 export const ACTTYPE2 = ‘add2‘ 15 16 Store.js //用来初始化state数据(默认空)，并将reducer和state绑定到store上 17 18 import {createstore} from ‘redux‘ 19 import reducer from ‘./Reducer.js‘ 20 var state = { 21 type:‘‘, 22 payload:‘‘ 23 } 24 var store = createstore(reducer,state) 25 export default store 26 27 Reducer.js //通过action返回不同的数据， 28 29 import * as actionTypes from ‘./ActionTypes.js‘ 30 export default {(state,action)=>{ 31 switch (action.type) { 32 case actionTypes.ACTTYPE1 : 33 return {...state, payload : action.payload} //将state展开，然后再添加一个payload属性，用来覆盖之前的payload属性 34 case actionTypes.ACTTYPE2 : 35 return {...state, payload : action.payload} 36 default : 37 {...state} 38 } 39 }}
4.在需要改变 state 数据的组件上，引入 connect 并定义两个函数，并将定义的 Action 和 ActionTypes 引入
1.定义 mapStateToProps 和 mapDispatchToProps 两个函数。前一个是用来将 state 映射到this.props上的（就是映射到该组件上），后一个是将dispatch映射到组件上的。
2.引入 Action 和 ActionTypes 是为了调用Action函数，而Action函数创建了一个Action，调用Action函数的时候会传值，传的值就是action的值。 然后通过action修改state的数据
3.使用connect链接两个函数和组件，并暴露
export default connect( mapStateToProps , mapDispatchToProps )(Zujian)
4.mapStateToProps
1 const mapStateToProps = function(state , ownProps){ 2 return { 3 text : state.text //将state中定义的数据（text）返回到props上。这样在类中就能通过this.props.text访问到state中的数据 4 } 5 } 6 const mapDispatchToProps = function(dispatch , ownProps){ 7 return { 8 funcname : (text)=>{ //返回一个方法到props上，这样就可以通过this.props.funcname( ‘tt‘ )调用这个方法，并调用dispatch 9 dispatch( Action.action1( { type : action1type , payload : ‘sunny‘ } ) ) //调用dispatch 创建一个action，并修改state 10 } 11 } 12 }
5.在需要显示store中的数据的组件上也要定义 mapStateToProps 和 mapDispatchToProps 两个函数，并用connect链接。mapDispatchToProps 中的返回内容可以为空对象。
