dva的学习总结

公司的项目源码用的是react和dva,所以我必须抓紧时间学习一下dva了,一天时间,看看我学到了什么(dva官网DvaJS)[这是很久之前就打算写的了,一直没时间,一直存着草稿,今天发出来吧]

1.介绍

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

2.安装 dva-cli

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

3. 创建新应用

dva new dva-quickstart

4. 通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载antd 的脚本和样式的

$ npm install antd babel-plugin-import --save

编辑 .webpackrc,使 babel-plugin-import 插件生效。

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

注:dva-cli 基于 roadhog 实现 build 和 dev,

5.定义路由

新建 route component routes/Products.js,内容如下:

import React from 'react';const Products = (props) => (<h2>List of Products</h2>
);export default Products;

添加路由信息到路由表,编辑 router.js :

+ import Products from './routes/Products';
...
+ <Route path="/products" exact component={Products} />

npm start 启动服务

在浏览器里打开 http://localhost:8000/#/products ,你应该能看到前面定义的 <h2> 标签

6. 编写 UI Component

随着应用的发展,你会需要在多个页面分享 UI 元素 (或在一个页面使用多次),在 dva 里你可以把这部分抽成 component 。

我们来编写一个 ProductList component,这样就能在不同的地方显示产品列表了。

新建 components/ProductList.js 文件:

import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';const ProductList = ({ onDelete, products }) => {const columns = [{title: 'Name',dataIndex: 'name',}, {title: 'Actions',render: (text, record) => {return (<Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}><Button>Delete</Button></Popconfirm>);},}];return (<TabledataSource={products}columns={columns}/>);
};ProductList.propTypes = {onDelete: PropTypes.func.isRequired,products: PropTypes.array.isRequired,
};export default ProductList;

7. 定义 Model

完成 UI 后,现在开始处理数据和逻辑。

dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。

新建 model models/products.js :

export default {namespace: 'products',state: [],reducers: {'delete'(state, { payload: id }) {return state.filter(item => item.id !== id);},},
};

这个 model 里:

  • namespace 表示在全局 state 上的 key
  • state 是初始值,在这里是空数组
  • reducers 等同于 redux 里的 reducer,接收 action,同步更新 state

然后别忘记在 index.js 里载入他:

// 3. Model
+ app.model(require('./models/products').default);

8. connect 起来

到这里,我们已经单独完成了 model 和 component,那么他们如何串联起来呢?

dva 提供了 connect 方法。如果你熟悉 redux,这个 connect 就是 react-redux 的 connect 。

编辑 routes/Products.js,替换为以下内容:

import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';const Products = ({ dispatch, products }) => {function handleDelete(id) {dispatch({type: 'products/delete',payload: id,});}return (<div><h2>List of Products</h2><ProductList onDelete={handleDelete} products={products} /></div>);
};// export default Products;
export default connect(({ products }) => ({products,
}))(Products);

最后,我们还需要一些初始数据让这个应用 run 起来。编辑 index.js

- const app = dva();
+ const app = dva({
+   initialState: {
+     products: [
+       { name: 'dva', id: 1 },
+       { name: 'antd', id: 2 },
+     ],
+   },
+ });

 9.打包

 npm run build

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据量快速数据库还原程序

最近在搞数据库备份&#xff0c;备份出来的sql都十几G&#xff0c;还原的贼慢还容易报错&#xff0c;就写了个Java程序来定时还原数据库&#xff0c;我加快还原的方法是修改数据库配置&#xff0c;因此程序需要重启数据库&#xff0c;线上项目数据库不能重启的就别用了。&#…

dp-基础版动态规划(动态规划每日一题计划)10/50

最小路径和 class Solution {public static int minPathSum(int[][] grid) {int dp[][]new int[grid.length][grid[0].length];dp[0][0]grid[0][0];for(int i1;i<grid[0].length;i){dp[0][i]grid[0][i]dp[0][i-1];}for(int i1;i<grid.length;i){dp[i][0]grid[i][0]dp[i-…

江苏开放大学形成性考核 平时作业参考试题

试卷代号&#xff1a;1317 社会工作行政&#xff08;本&#xff09; 参考试题 一、单项选择题&#xff08;每题只有一个正确答案&#xff0c;请将正确答案的字母填写在括号内。每题1分&#xff0c;共8分&#xff09; 1.面对新冠肺炎疫情带来的不确定性和挑战&#xff0c;某社…

linux中slab与slub的实现区别

整体上slub的实现比slab更清爽&#xff0c;连带着方便测试和debug slab 与 slub 实现对比 SLABSLUBcpu_cache上缓存的对象以slab中的某个对象为单位&#xff0c;批发到cpu_cache上以整个slab为单位装入cpu_cache上cpu_cache结构struct array_cache struct kmem_cache_cpu 是否支…

C++红黑树封装set和map(很详细)

前言 在前面&#xff0c;我们学习了红黑树。&#xff08;没学过红黑树直接看会很吃力&#xff09;set和map的底层就是红黑树&#xff0c;现在我们要用这棵树来封装STL里面的容器&#xff1a;set和map。 下面是之前讲过的红黑树&#xff0c;他只是普通的“Key”模型,适合封装set…

BabyLIN产品如何轻松搞定K线协议实现?

来源&#xff1a;虹科汽车电子 虹科技术丨BabyLIN产品如何轻松搞定K线协议实现&#xff1f; 原文链接&#xff1a;https://mp.weixin.qq.com/s/LR7VHFQajjyw6s6bVDJmsg 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 导读 为了实现K线通信&#xff0c;SDF-V3在协议…

redis性能测试

redis性能测试 redis提供了一个性能测试工具redis-benchmark&#xff0c;可以使用redis-benchmark命令来了解redis的性能 redis-benchmark -q -c 50----------------------q 表示简化输出结果-c 50 表示有五十个客户端-n <requests> 客户端请求总量 运行结果展示了一些常…

类的加载器

文章目录 1. 类加载器的分类2. 双亲委派模型3. 沙箱安全机制 1. 类加载器的分类 口述&#xff1a;启动类加载器加载jvm需要的核心的类库&#xff0c;扩展类加载器加载外部的jar包&#xff0c;应用程序加载器加载我们自己定义的类。 2. 双亲委派模型 规定了类加载的顺序是&a…

FAQ:Reference篇

文章目录 What is a reference?What happens if you assign to a reference?What happens if you return a reference?What does object.method1().method2() mean?How can you reseat a reference to make it refer to a different object?Why does C have both pointers…

m1源码编译xgboost的动态链接库dylib

1、下载源码 git clone --recursive https://github.com/dmlc/xgboost cd xgboost拉取源码时候&#xff0c;一定要加"--recursive"这个命令。把它的字模块也要拉取下来&#xff0c;才能编译成功 2、安装c依赖 必要的依赖项(不然后续编译时报错)&#xff0c;包括CM…

用java比较两个二叉搜索树是否等价

一. 定义树的的节点 ​ 不同二叉树的叶节点上可以保存相同的值序列。例如&#xff0c;以下两个二叉树都保存了序列 1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13。 package com.wedoo.coderyeah.module.iot.algorithm;import lombok.…

【CentOS】配置 Apache 服务

yum install httpd -y# 查看是否安装成功 httpd -v # 出现版本号表示成功# 启动服务 systemctl start httpd# 查看状态 systemctl status httpd # running 即可成功 ● httpd.service - The Apache HTTP ServerLoaded: loaded (/usr/lib/systemd/system/httpd.service; disable…

Redlock算法实现Redis分布式锁

Redlock算法实现Redis分布式锁 为什么基于故障转移的实现还不够 使用 Redis 锁定资源的最简单方法是在实例中创建密钥。密钥通常是在有限的生存时间内创建的&#xff0c;使用 Redis 过期功能&#xff0c;以便最终它被释放&#xff08;我们列表中的属性 2&#xff09;。当客户…

每日一题 2646. 最小化旅行的价格总和(困难,树)

分解为两个子问题&#xff0c;树中节点到节点的路径问题&#xff0c;价格减半树的最小值问题由于它是无向的树&#xff0c;所以对于每一次旅行&#xff0c;以 start 为根&#xff0c;通过dfs寻找 end 就可以很简单地找到需要的路径且它是唯一的&#xff0c;这里我们统计每经过一…

Splashtop 荣获 SDC“年度安全供应商”奖

2023年12月5日 荷兰阿姆斯特丹 Splashtop 是随处办公环境改革的先驱&#xff0c;在伦敦举办的第14届 SDC 颁奖典礼上荣获“年度安全供应商”奖&#xff0c;我们对此感到十分自豪。荣获这一知名奖项凸显了 Splashtop 致力于通过企业级加密和基于权限的访问保护不同规模组织的决…

准确!!!在 CentOS 8 上配置 PostgreSQL 14 的主从复制

在 CentOS 8 上配置 PostgreSQL 14 的主从复制&#xff0c;并设置 WAL 归档到特定路径 /home/postgres/archive 的步骤如下&#xff1a; 主服务器配置&#xff08;主机&#xff09; 配置 PostgreSQL&#xff1a; 编辑 postgresql.conf 文件&#xff1a; vim /data/postgres/p…

iis--IIS8中安装和使用URL重写工具(URL Rewrite)的方法

URL重写-下载 IIS8中安装和使用URL重写工具(URL Rewrite)的方法 IIS版本号可以被识别&#xff0c;修复图解&#xff0c;亲测有效

我的NPI项目之Android 安全系列 -- 天地混沌初开

最近在因为有新项目启动&#xff0c;目前处在kickoff之后research阶段&#xff0c;预计在1st March能拿到到Pre-EVT&#xff1b; 在此之前最主要的就是需求分析/可行性分析/风险评估。 而对于软件来说&#xff0c;作为传说中的software project leader&#xff0c;要做的最重要…

运维之远程桌面连接失败问题排查

背景&#xff1a;同一局域网&#xff0c;可以ping通但是远程连接不上&#xff0c;排查一下问题。 1、被远程计算机是否允许远程连接 2、被远程计算机防火墙是否允许 3、被远程计算机远程桌面服务是否正常 4、查看用户权限

mfc项目设置软件版本

//上面设置的版本通过下面的代码可以获取到 TSTRING CVersion::GetSoftVersion() {TSTRING strVer _T("");TCHAR szPath[MAX_PATH] _T("");memset(szPath, 0, sizeof(szPath));::GetModuleFileName(NULL, szPath, sizeof(szPath));//得到本程序的目录UIN…