redux的使用过程

1.redux是react的状态管理工具，可以用来存放公共数据，因此也可用来作为组件间参数传递的方法。

 

2.组件传参，需要有一个公共的父组件。在父组件中引入Provider。通过Provider将store传递到子组件中，这样子组件就可以使用store中的数据。

        在render函数中，将返回的HTML面板用 <Provider store={ store } ></Provider>包裹起来，这样就可以实现传递

            main.js

 import child1 ....　　　　　　//引入组件
 import child2 ....　　　　　　//引入组件

 import {Provider} from 'react-redux'
 ....
 render(){
     return (
         <Provider store = {store}>　　　　//添加Provider标签
             <div>
                 <child1>111</child1>
                 <child2>222</child2>
             </div>
         </Provider>
    )
 }
 ....

 

3. 创建redux所需要的基本的四个文件：Actions.js   ActionTypes.js   Store.js   Reducer.js

 

 Actions.js            //定义Action函数,当有数据改变时，就产生了一个action，携带着新的payload和之前的type

 var actionFunc = function(action){
     return {
         type:action.type,
         payload:action.payload
     }
 }
 export default actionFunc

 ActionTypes.js        //定义action的类型，根据类型返回不同的state

 export const ACTTYPE1 = 'add1'
 export   const  ACTTYPE2 = 'add2'

 Store.js              //用来初始化state数据(默认空)，并将reducer和state绑定到store上

 import {createstore} from 'redux'
 import reducer from './Reducer.js'
 var state = {
     type:'',
     payload:''
 }
 var store = createstore(reducer,state)
 export default store

 Reducer.js            //通过action返回不同的数据，

 import * as actionTypes from './ActionTypes.js'
 export default {(state,action)=>{
     switch (action.type) {
         case actionTypes.ACTTYPE1 :
             return {...state, payload : action.payload}    //将state展开，然后再添加一个payload属性，用来覆盖之前的payload属性
         case actionTypes.ACTTYPE2 :
             return {...state, payload : action.payload}
         default :
             {...state}
     }
 }}

  

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 

 const mapStateToProps  =  function(state , ownProps){
     return {
         text : state.text        //将state中定义的数据（text）返回到props上。这样在类中就能通过this.props.text访问到state中的数据
     }
 }
 const mapDispatchToProps = function(dispatch , ownProps){
     return {
         funcname : (text)=>{        //返回一个方法到props上，这样就可以通过this.props.funcname( 'tt' )调用这个方法，并调用dispatch
                 dispatch( Action.action1( { type : action1type  ,  payload : 'sunny' } ) )    //调用dispatch 创建一个action，并修改state
         }
     }
 }

 

5.在需要显示store中的数据的组件上也要定义 mapStateToProps 和 mapDispatchToProps 两个函数，并用connect链接。mapDispatchToProps 中的返回内容可以为空对象。