简单上手理解Dav框架

本文介绍了Dva框架中的核心概念,包括Model中的State、Action、Dispatch、Reducer和Effect,详细阐述了数据的流向,从View层触发到Service层请求数据,再到Model层处理和更新State,最后重新渲染View。同时,解释了Model、View、Service的编写及调用原理,展示了Dva中同步和异步操作的管理方式。
摘要由CSDN通过智能技术生成

官方教程:https://dvajs.com/guide/getting-started.html

一、Model中相关概念的理解

  1. State : 表示 Model 的状态数据,通常表现为一个 javascript 对象
  2. Action : Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。
  3. dispatch函数: 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者 Effects
this.props.dispatch({
   
  	type: 'user/add', // 如果在 model 外调用,需要添加 	namespace,其中'user/add'中的user即为model中的namespace,add是reducers中的方法
  	payload: {
   }, // 需要传递的信息
	});
  1. Reducer : Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果(state)和当前要被累积的值(action.payload),返回的是一个新的累积结果。该函数把一个集合归并成一个单值。主要用于同步操作。
reducers: {
   
    	getProjectAllData(state, action) {
   
        	return {
    ...state, ...action.payload }
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值