使用 dva + antd 快速开发react应用

版本说明:

注意:dva的版本是0.9.2

$ node -v
v10.2.1 $ npm -v
5.6. $ dva -v
dva-cli version 0.9.

安装cli脚手架:

npm install dva-cli -g

使用脚手架生成应用:

dva new dva_page

建议:在new之前最好安装一下淘宝镜像,因为dva new命令会自动安装node_modules,如果使用npm会比较慢。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装antd和babel按需加载插件工具:

cd dva_page

npm install antd --save

npm install babel-plugin-import --D

配置babel-plugin-import:

修改根目录下的.webpackrc文件(注意前面的.,代表linux下的隐藏文件,这是roadhog的webpack配置文件)

{
"extraBabelPlugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}]
]
}

启动服务:

npm start

此时打开浏览器http://localhost:8000/#/可以看到:

编写routes:

dva默认的页面写在 \src\routes 目录下面:

我们随便引入一个antd组件,写一个demo:

import React, { Component } from 'react';
import { connect } from 'dva';
import { Timeline } from 'antd'; class Demo extends Component {
render() {
return (
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
);
}
} Demo.propTypes = {
}; export default connect()(Demo);

修改路由router.js:

dva的路由配置默认处在 \src\routes 里,我们在里面增加一个路由:

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Demo from './routes/Demo'; function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/demo" exact component={Demo} />
</Switch>
</Router>
);
} export default RouterConfig;

现在我们已经可以在http://localhost:8000/#/demo访问新增的页面了。

网络请求:

之前编写的都是静态页面,那么如果有网络请求和数据交互,怎么弄呢?

先完善下 \src\routes\Demo.js :

组件在willMount生命周期会dispatch数据到models层中 namespace 为demo的对象, 触发执行effects中的fetch方法。

import React, { Component } from 'react';
import { connect } from 'dva';
import { Timeline } from 'antd'; class Demo extends Component {
UNSAFE_componentWillMount() {
// dispatch -> effects -> reducer -> 更新this.props
this.props.dispatch({
type: 'demo/fetch', //models里的namespace/effects中的方法名
payload: { //models里的namespace/effects中的payload参数
time: Date.now(),
},
}).catch(err => {
// 异常可以在这里处理,比如网络请求等等
  })
} render() {
// console.log(this.props);
return (
<Timeline>
<Timeline.Item>{`${new Date(this.props.new_time)}`}</Timeline.Item>
</Timeline>
);
}
} Demo.propTypes = {
}; const mapStateToProps = (state) => { //把state转换为props
console.log(state);
// 这里会把return的对象作为props传入到Demo这个类里
return state.demo;
}; export default connect(mapStateToProps)(Demo);

在  \src\services\ 中新建文件demo.js :

发送一个网络请求:

import request from '../utils/request';

export function query(params) {
return request('/api/users');
}

在  \src\models\ 中新建文件demo.js :

先引入service文件  /services/demo.js -> 定义namespace为demo -> 在effects定义generator函数 *fetch ,调用services中的请求,将请求结果放入reducers -> reducer将最终结果传入  \src\routes\Demo.js 。

import * as demo from '../services/demo';

export default {

  namespace: 'demo',

  state: {
a: 1
}, subscriptions: {
setup({ dispatch, history }) {
},
}, effects: {
// payload 是\src\routes\Demo.js dispatch 过来的参数
*fetch({ payload }, { call, put }) {
// 调用service中的请求,把请求结果存放在result中
let result = yield call(demo.query, payload.time); //如果使用 {参数} ,则是一个对象
result = { data: payload.time / 1000 }; // 因为没有配后台,所以这里result自己模拟数据
// 将result放入reducer中
yield put({
type: 'save', //reducers中的方法名
payload:{
new_time: result.data //网络返回的要保留的数据
}
});
},
}, reducers: {
save(state, action) {
// 将state和effects的put方法的payload传给\src\routes\Demo.js
return { ...state, ...action.payload };
},
}, };

在 /src/index.js 中 注册model:

import dva from 'dva';
import './index.css'; // 1. Initialize
const app = dva(); // 2. Plugins
// app.use({}); // 3. Model
// app.model(require('./models/example').default);
app.model(require('./models/demo').default); // 4. Router
app.router(require('./router').default); // 5. Start
app.start('#root');

最后在浏览器http://localhost:8000/#/demo看到:

总结:

dva的数据流可以概括为:

1. 注册model

2. 使用connect连接mode和page

3. 数据流方向: page(routes)  ->  (this.props.dispatch)  ->  model ->model/effects -> (call) -> service -> model/effects -> (put) -> reducer -> page -> (this.props)

使用 dva + antd 快速开发react应用的更多相关文章

  1. antd快速开发(Form篇)

    antd快速开发(Form篇) 前言 由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form的快捷方法. ...

  2. vulcanjs 开源工具方便快速开发react graphql meteor 应用

    vulcan 开源工具方便快速开发react graphql meteor 应用 操作环境mac os 安装 meteor 安装(此安装有点慢,可以通过正确上网解决) curl https://ins ...

  3. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  4. 【React】使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  5. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  6. 快速构建 React 开发环境

    使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...

  7. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  8. 快速了解react

    概况: 通过本篇文章你可以对react的重点有个整体的认识. 关于react是什么,优点,解决什么问题等,网上一大推就不啰嗦了. 了解虚拟DOM的实现,参考这篇文章 [虚拟DOM](https://w ...

  9. 使用脚手架快速搭建React项目

    create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...

随机推荐

  1. 第1节 yarn:14、yarn集群当中的三种调度器

    yarn当中的调度器介绍: 第一种调度器:FIFO Scheduler  (队列调度器) 把应用按提交的顺序排成一个队列,这是一个先进先出队列,在进行资源分配的时候,先给队列中最头上的应用进行分配资源 ...

  2. 学习 Qt 编程的好书精品推荐!

    最近一段时间,准备开始搞Qt方面的东西,想找几本书看看.网上介绍QT的书籍也有很多,不想浪费时间,所以想找几本精品的书籍来看.花了半天的时间找了几本非常不错的,这里面整理好之后推荐给大家! 下面介绍的 ...

  3. c语言中的 strcpy和strncpy字符串函数使用介绍

    1.strcpy函数 函数原型:char *strcpy(char *dst,char const *src)            必须保证dst字符的空间足以保存src字符,否则多余的字符仍然被复 ...

  4. Python列表、元组、字典、集合的内置使用方法

    列表: 是一种可以存储多个值得数据容器 内容是有序的 可以存储任何数据类型 可以存储重复的元素 是可变类型(当内容发生变化时id不变) 元组: 也是一种可以存储多个值得数据容器 元组中的元素不可以被修 ...

  5. delphi GDI+ [1]

    摘抄自:万一的博客 安装头文件:http://www.cnblogs.com/del/archive/2008/06/06/1215319.html 目录 基本使用方法(绘制直线) 绘制一组直线 绘制 ...

  6. node Buffer.byteLength()

    Buffer.byteLength(string[, encoding]) string {String} | {Buffer} | {TypedArray} | {DataView} | {Arra ...

  7. centOS7+mariadb+Nginx+PHP7.0 安装

    1.前期准备工作 更新 yum 源,自带的源没有 PHP5.6 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7 ...

  8. 文件权限设置与http,php的关系

    在web服务器上的文件要使用什么权限比较好呢.我开始的时候直接都是777,后台安全部门的同事,通过漏洞把我管理的服务器给搞了.报告到我这里,我才意识到权限的设置不能马虎.环境采用nginx+php,一 ...

  9. 【BZOJ1758】重建计划(点分治)

    题意: 给定一棵n个点的树,每条边有权值.求一条链,这条链包含的边数在L和U之间,且平均边权最大.N﹤=100000 思路:RYZ作业 二分答案再点分治,寻找是否有大于0且边数在L和U之间的链 f[i ...

  10. 2017-10-01-afternoon

    T1 一道图论好题(graph) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带 ...