react-Dva数据流、dispatch

Dva 数据流

话不多说先看图，分解来看，component 也就是你的组件，他的内部包含数据，方法。dispatch是什么呢？你可以理解为一个动作，他将派发action。包括effect、reducer、subscription等等。这些数据在变化后将更新你的数据state。你可以清晰的看见数据流的单向流动。

Dva 结构

一个Dva文件是怎样写的呢？js文件中的各个部分都有什么作用？

export default {
 namespace:'yournamespace',
 state: {
 //存放数据
 }
 effects: {
	// 多个副作用
	*youreffectfunction({ payload },{ call, put， select }){
	//我们用 payload 来传值 
	// 这里的call 用来进行异步操作，payload 作为参数传给你的异步方法中
 	const response = yield call(util.someajaxfunction, payload);
	//put 是用来触发reducer更新state
	yield put({
	 type:'myreducername',
	 payload: { yourobj },
	 );
	//select 从 state 里获取数据
	 const { args } = yield select(state => state[namespace]);
	return response;
	}
	}
}
reducers: {
	//这里的reducer用来更新state
	myreducername(state, action) {
	const { res } = action.payload;
	return {
	...state,
	somedata: res,
	}
	}
};
subscriptions: {
//Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
}

点我看effect的各个api，call、put、take、select…

怎么把一个Dva 的js文件用起来

1、在你的view中的js文件中 connect进来

import { connect } from 'dva';
@connect(({ yournamaspace }) =>({
yournamespace,
}))

2、在你的方法中使用dispatch

yourfunction = () => {
const { dispatch } = this.props;
dispatch({
type:'yournamespace/youreffectfunction',
payload: {
yourobj,
},
}).then((res) => {
//处理你拿到的数据
})
}

ps：当你在view层的js文件中 使用dispatch时，对应了models层的js文件中的namespace以及effect中的方法名。也就形成了数据流。