dva和UmiJs结合使用教程：effects，reducer，dispatch

dva使用

dva和UmiJs结合的官方文档：dva | UmiJS

准备工作

1.预先定义好model数据仓库信息，namespace表示model仓库名，state表示model仓库中需要用到的数据。

 const Model = {namespace: 'coursewareName',state: {coursewareList: [],total: 0,},

2.绑定组件(CoursewareManage)与数据仓库(coursewareName)

 const mapStatetoProps = ({ coursewareName }) => {return { coursewareName }}export default connect(mapStatetoProps)(CoursewareManage)

数据更新过程：

1.首先通过调用函数等操作发送dispatch请求

 const getCoursewareList = (pageSize, current, order) => {setIsLoading(true)dispatch({type: 'coursewareName/getCoursewareList',payload: {pageSize,current,order,},callback: () => {setIsLoading(false)},})}

2.由dispatch执行model中的effects对应的函数，在effects函数中调用service函数，通过异步方式从后端中获取到所需数据

 effects: {*getCoursewareList({ payload, callback }, { call, put }) {const res = yield call(getRemoteCoursewareList, payload)yield put({type: 'saveCoursewareList',payload: res,})if (callback) callback()},},

3.获取到的数据传递给reducers中的函数，通过同步方式更新model中的state数据信息

 reducers: {saveCoursewareList(state, { payload }) {//console.log('reducers:', payload)return {...state,coursewareList: payload.data,total: payload.total,}},},

5.state数据更新后，由于数据已绑定组件，react会重新渲染组件ui

dva和UmiJs结合使用教程：effects，reducer，dispatch相关推荐

ant+dva Ract系统前端开发教程
ant+dva Ract系统前端开发教程开发准备: 基本知识: 1.React http://reactjs.cn/react/docs/getting-started-zh-CN.html或htt ...
dva 打包多个html,使用dva+umi+antd构建页面（一）
使用dva+umi+antd构建页面首先确保安装npm或者yarnhtml 建立新应用首先建立应用目录node mkdir myapp && cd myapp 推荐使用 yarn ...
React框架之对Dva和Umi的简单理解
文章目录简述Dva,Umi和路由的理解 Dva基本流程与文件目录规划 Model Reducer.Effect Dva订阅 (Subcription) service(服务) 一个路由的文件目录使 ...
学习react前端框架dva
dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". 一. ...
dva + antd + mockjs 实现用户管理
1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs npm ins ...
200行代码写一个简易的dva
在美团实习的时候,第一次接触到dva这样的react框架,回学校的时候,就想有机会自己实现一下这样的框架,虽然自己水平有限,但是可以试一试哈. 目标是实现dva model的同步和异步 dispatc ...
umijs配置eslint,prettier,stylelint,commitlint
umijs的资料好像不是很多,真的配置了超级久呜呜呜呜,踩了居多坑我记得我的是一创建项目,默认就有yorkie,所以我就不想用husky,我看网上都是husky教程的,关于umijs+yorkie的 ...
antd pro中如何使用mock数据以及调用接口
antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步在dva中主要分为3层 services models components models层用于存放数据 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...

dva和UmiJs结合使用教程：effects，reducer，dispatch

dva使用

准备工作

数据更新过程：

dva和UmiJs结合使用教程：effects，reducer，dispatch相关推荐

最新文章

热门文章