總結在前:
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。