博客 / 詳情

返回

dva學習--在組件中dispatch一個action

總結在前:

1.model文件結構:

  • namespace
  • state
  • subscriptions
  • effects
  • reducers

2.在組件內方法中調用dispatch({type:example/action},params)進行值得傳遞更新,dispatch第一個參數的方法為model中effects中的異步方法名,其中的異步方法yield修飾put(type:reducers中的方法,params:參數)進行對當前model state值得更新
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。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.