dva上手

简介

dva是一个基于redux和redux-saga的数据流方案。为了简化开发体验，dva还额外内置了react-router 和fetch，所以也可以理解为一个轻量级的应用框架。

特性

1.易学易用，仅有6个api，对redux用户尤其友好，配合umi使用后更是降低为 0 API
2.elm概念，通过reducers, effects和subscriptions组织model
3.插件机制，比如dva-loading可以自动处理loading状，不用一遍遍地写showLoading和hideLoading
4.支持HMR，基于babel-plugin-dva-hmr实现components、routes和models的 HM

初始化

安装dva-cli：

npm install -g dva-cli
# 或
yarn global add dva-cli

 创建项目目录，并进入该目录：

mkdir your-project
cd your-project

初始化项目：

dva init

运行项目：

npm start 
#或 
yarn start

目录结构

 

|- mock
|- node_modules
|- package.json
|- public
|- src
    |- asserts
    |- components
    |- models
    |- routes
    |- services
    |- utils
    |- router.js
    |- index.js
    |- index.css
|- .editorconfig
|- .eslintrc
|- .gitignore
|- .roadhogrc.mock.js
|- .webpackrc

mock 存放用于 mock 数据的文件；
public 一般用于存放静态文件，打包时会被直接复制到输出目录(./dist)；
src 文件夹用于存放项目源代码；

　　asserts 用于存放静态资源，打包时会经过 webpack 处理；
　　components 用于存放 React 组件，一般是该项目公用的无状态组件；
　　models 用于存放模型文件
　　routes 用于存放需要 connect model 的路由组件；
　　services 用于存放服务文件，一般是网络请求等；
　　utils 工具类库
　　router.js 路由文件
　　index.js 项目的入口文件
　　index.css 一般是共用的样式

.editorconfig 编辑器配置文件
.eslintrc ESLint配置文件
.gitignore Git忽略文件
.roadhogrc.mock.js Mock配置文件
.webpackrc 自定义的webpack配置文件，JSON格式，如果需要 JS 格式，可修改为 .webpackrc.js