dva学习--在组件中dispatch一个action

model的数据：


export default {

  namespace: 'example',   //表示对于整个应用不同的命名空间,以便通过this.props.example访问，和当前model文件名相同就好之前的reducer名字相同，是全局state的属性，只能为字符串，不支持.的方式建立多重

  state: {num:1},     //表示当前的example中的state状态，这里可以给初始值，这里num初始为1

  subscriptions: {
    setup({ dispatch, history }) {  // 订阅，这个实际用的少，表示监听当前state的变化
    },
  },

  effects: {
  
  },
    
  //用来保存更新state值 上面的put方法调用这里的方法
  reducers: {
   
  },

};

那么在组件中怎么分发数据呢，首先需要使用connect连接数据以及传递dispatch，如下：

import React from "react";
import {Component} from 'react';
import { connect } from "dva"; //从dva中导入connect
import {Button} from "antd";
 
class Counter extends Component {
    constructor(props){
        super(props)
    }  
    
//做dispatch分发的方法，相当于做一个请求
    add = ()=>{
      const {num,dispatch} = this.props.example;
      let param = 2 + num;  //在原有的数据上加2
        dispatch({
          type: 'example/addByOne',  //这里的example是model的命名空间，"/"后面的表示model中effect的异步方法名
          param:param                  //这个表示要传递参数，当然这里可以是一个方法，作为回调方法
        });
      
    }
    render (){
        return (
            <div>
                 <div>
                 <Button onclick={this.add()}>增加</Button>
                 </div>               
                 <p> this.props.example.num</p> //如这里就获取到了model定义的num数据了
            </div>
        )
    }
}
const mapStateToProps = (state) =>{
    return {
        example：state.example, //这里的example表示后面用this.props.example获取state（根节点）中exmpale命名空间（model的example.js中的state所有数据）的数据
    }
}
export default connect (mapStateToProps)(Counter) //通过这种方式来把model层的数据传递到当前组件了

如上面所示，那么怎么在model层添加方法做异步处理。重新在model文件的example.js添加addByOne方法

如下：


export default {

  namespace: 'example',   //表示对于整个应用不同的命名空间,以便通过this.props.example访问，和当前model文件名相同就好之前的reducer名字相同，是全局state的属性，只能为字符串，不支持.的方式建立多重

  state: {num:1},     //表示当前的example中的state状态，这里可以给初始值，这里num初始为1

  subscriptions: {
    setup({ dispatch, history }) {  // 订阅，这个实际用的少，表示监听当前state的变化
    },
  },

  effects: { //这里是做异步处理的
    *addByONe({ param}, { call, put }) { 
     //param是从组件router传递过来的参数,这里就是上面定义的2
     //这里的call方法可以使用param参数传递给后台程序进行处理这里，也可以调用service层的方法进行调用后端程序，
     //这里的put表示存储在当前命名空间example中，通过save方法存在当前state中


      //在这里可以用ajax调用后台程序处理并返回数据，有很多种处理方式，当然有些处理不需要后端的，可以直接put方法更新state数据
 
      yield put({
         type: 'save',   //这个就是调用reducers中的方法进行跟新当前命名空间state的数据
         num:param
      });
    }
   

  },
    
  //用来保存更新state值 上面的put方法调用这里的方法
  reducers: {
    save(state, action) { //这里的state是当前总的state，这里的action包含了上面传递的参数和type
      return { ...state, ...action.num }; //这里用ES6语法来更新当前state中num的值
    },
  },

};

如上面的方法可以看到使用addByOne可以做到更新state的数据，当model层的数据变更后，组件中的数据也会跟着改变，每次点击当前的数字都会增加2。

dva学习--在组件中dispatch一个action

猜你喜欢