dva基本用法

1. npm install -g dva-cli 全局安装dva.
2. dva new myApp --demo 创建dva项目.
3. cd myApp npm start 启动项目.
4. 定义 model (1) 先设计model (2) 在设计 component (3) 连接 model 和
component .
5. 在model中定义state(在state里初始话store里的数据),effects(相当于action),reducers
执行过程:
(1)在组件中的this.props.dispatch()方法里派发一个对象给effects,对象里包含一个类型和要派发的内容如:{type:'filename/bikeAllInfo(effectsname)',payload:value}

(2)model里的effects接收到后通过put方法再派发一个类型和内容的对象给reducers 如:
                  * bikeAllInfo({ payload }, { put }){
                        yield put({
                                      type: "setBikeAllInfo(redusersname)",
                                      payload:"value"
                                    })
                      }
 
           (3)model里的reducers接收到bikeAllInfo派发来的内容后, 对在model里state中定义的变量和接收到的值进行组合保存到store中然后就可以在组件中的this.props中调用
                  
                    setBikeAllInfo (state, action) {
                         let bikeAllInfo = action.payload || {}
                         return Object.assign({}, state, {
                             bikeAllInfo,
                         })
                      },
 6.在组件中引入 import {connect} from 'dva'; 导出时用connect进行组件的连接
   
     const mapStateToProps = (state) => {
        return {
                state
          }
     }; 
    export default connect(mapStateToProps)(组件名);

 

posted @ 2018-04-23 12:00  菜鸟乐谷  阅读(678)  评论(0编辑  收藏  举报