umi+dva数据流实战，学会了之后你会发现比react-redux好用数倍！

前文介绍

umi框架是由 react + react-route + webpack等进行的封装，而dva则是基于redux和redux-saga的数据流方案，此外dva还额外集成了react-router和fetch。

建立和启动项目脚手架

先建立一个空的文件夹

$ mkdir new-umi-dva复制代码

进入此时建立好的文件夹里，建立umi+dva项目

$ cd new-umi-dva
$ yarn create umi复制代码

后面选项选择

建立完成之后执行

yarn or cnpm i  //下载依赖
npm start //启动项目 默认启动网址是 http://localhost:8000复制代码

如今来写一个根据用户名id查询当前我的信息的功能

项目的目录结构：

一个完整的React页面就是View + Service + Model ，分别对应着index.jsx，service.js，model.js。

index.js

service.js

model.js

代码思路总结：

index.js编写完UI组件后，输入用户ID的事件触发以前userView是空的集合。输入用户ID的事件触发以后，因为用了dva引入的connect装饰器，能够随意在函数里使用this.props.dispatch，这时触发dispatch函数到了model.js的effects里的getViewModel函数里，执行到yield call的时候去触发service.js的函数发送网络请求，再根据服务端的返回数据判断是否去执行yield put操做。若是response.res返回值为true, 则执行yield put操做到reducers的getViewReducer()去更新state里的view数据，当state的值更新之后，就会从新将state.view赋值到index.js的this.props.userView，这时候就取到当前用户ID的我的信息了。

若有错误或者缺漏，欢迎指点！