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

左手的ㄟ右手 2022-05-15 05:41 374阅读 0赞

model的数据：

那么在组件中怎么分发数据呢，首先需要使用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。