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

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

版本说明:

注意:dva的版本是0.9.2

$ node -v
v10.2.1

$ npm -v
5.6.0

$ dva -v
dva-cli version 0.9.2

安装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(),
      },
    })
  }

  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)

原文地址:https://www.cnblogs.com/shenshangzz/p/9093509.html

时间: 2024-10-13 01:20:58

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

react工程化项目搭建主流技术 umi3.0(或者&lt;3.0版本)+ dva + antd构建项目流程

umi+ dva + antd构建react工程项目(组件化开发搭建项目)1.官方网站安装node.js(并确保 node 版本是 10.13 或以上)2.先确保安装成功npm或者yarn3.npm i yarn tyarn -g (国内源)4.如果你没有 npx,需要先安装它,用于执行 node_modules 下的命令 yarn global add npx5.开始构建项目先区分版本: umi 3.0后也就是目前最新版本 mkdir myapp && cd myapp (新建建个项目目

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

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + ES6 . 1.$ cnpm install -g create-react-app 2.$ create-react-app my-app 3.$ cd my-app/ $ npm start 项目目录 create-react-app 执行慢的解决方法

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

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + ES6 执行命令如下: npm install create-react-app -g // 全局安装create-react-app,如果不想全局安装,则不要-g.可能会很慢,可以使用cnpm来安装 create-react-app my-app // my-app是项目名 cd my-app np

快速构建 React 开发环境

使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + ES6 . 执行以下命令创建项目: $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start npm 安装资源国内慢

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

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom

用 Webpack 和 ES6 转换快速开发 Rails 的富客户端

Fast Rich Client Rails Development With Webpack and the ES6 Transpiler 有更好的方式把 JavaScript 生态引入 Rails. 你有没有: 想知道是否有更好的方式在现有 Ruby on Rails 工程下使用现代 JavaScript 客户端框架? 烦恼怎样整合那些被打包成"模块"的 JavaScript 库和例子? 发现在全局命名空间下乱挂垃圾的弊端. 听说过 ES6 (又叫 Harmony),下一代 Jav

前端快速开发模版

原文地址:前端快速开发模版 之前一直在开发移动端的单页面应用,而移动web对性能和效果要求是比较苛刻的,所以用的都是轻量级的框架体系.基本上是Zepto加自己开发的单页面框架,再加上若干简单的库.这样前端要加载的文件很小,修改起来也非常方便,同时这样的轻量级的体系使用gulp进行自动化管理也是非常合适的. 自从开发react项目后,对它的工程化和开发模式也是开了眼界,标准的框架体系就是重量级的react+redux+webpack.开发大型项目和后台管理系统用react,vue确实是不错的.但是

快速入门react

安装react npm install creat-react-app -g这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react 创建新项目 create-react-app my-app cd my-app npm start 用脚手架创建一个新的单页应用,进到项目里面后start跑起来 react组件 引入Component组件 JSX语法 渲染虚拟DOM 组件props 组件state 组件嵌套 组件生命周期 组件总览 首先在头部引入Component组件

【转】两天快速开发一个自己的微信小程序 悬笔e绝 www.xuanbiyijue.com

文章出处:https://www.cnblogs.com/xuanbiyijue/p/7980010.html 作者: 悬笔e绝 www.xuanbiyijue.com 两天快速开发一个自己的微信小程序 一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先放上我做的小程序 可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码哦 (1)欢迎页:这个logo是当年念大学给社团做的l