码迷,mamicode.com
首页 > 其他好文 > 详细

redux的使用过程

时间:2017-12-11 21:13:20      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:react   red   ext   因此   内容   tty   基本   main   不同   

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 中的返回内容可以为空对象。

redux的使用过程

标签:react   red   ext   因此   内容   tty   基本   main   不同   

原文地址:http://www.cnblogs.com/waterFowl/p/8024893.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!