React 第十一章 Dva

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

Dva 的本意,是将基于 React 技术栈中常用到的库集成到一起。当时,React 社区中最流行的应用架构方案如下:

  • 路由: React-Router
  • 状态管理: Redux
  • 异步操作: Redux-saga

Dva 则是将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。因此:

Dva = React-Router + Redux + Redux-saga

特性

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

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State

image-20221105162108061 如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State。 image-20221105162152274

Dva 中的核心概念:

  • app.model
    • namespace: 当前 Model 的名称。整个应用的 State,由多个小的 ModelStatenamespacekey 合成
    • state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
    • reducers: Action 处理器,处理同步动作,用来算出最新的 State
    • effectsAction 处理器,处理异步动作,Effect 是一个 Generator 函数,内部使用 yield 关键字,标识每一步的操作(不管是异步或同步)
      • dva 提供多个 effect 函数内部的处理函数,比较常用的是 callput
      • call:执行异步函数
      • put:发出一个 Action,类似于 dispatch

简单示例

  1. 定义 Model
import {getStuListApi} from "../services/stuApi";

export default {
  namespace: "stuModel",
  // 仓库数据
  state: {
    stuList: [],
  },
  // 副作用
  effects: {
    // 从服务器获取学生数据
    // call 用来发送请求,put 用于同步更新本地仓库数据
    *_getStuList(_, { call, put }) {
        // 从服务器拿到数据
      const {data} = yield call(getStuListApi);
      // 将数据同步到本地的状态仓库
      yield put({
        type : "initStuList",
        data
      })
    },
  },
  // reducer,同步更新本地的仓库
  reducers: {
    initStuList(state, action){
       let obj = {...state};
       obj.stuList = [...action.data];
       return obj;
    }
  },
};

  1. connect 链接
import React from 'react';
import { connect } from 'dva';
import StudentList from '../components/StudentList';

const Student = ({ dispatch, stuList }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <StudentList onDelete={handleDelete} products={products} />
    </div>
  );
};

// export default Products;
export default connect(({ stuModel }) => ({
  stuList: stuModel.stuList,
}))(Student);

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Django-admin组件

Django-admin组件 admin是django中提供的一套可视化工具&#xff1a;用于对ORM中定义的表进行增删改查。 1 概览 在django项目启动时&#xff0c;自动找到注册到admin中的所有model中定义的类&#xff0c;然后为这些类生成一系列的URL和视图函数&#xff0c;实现基本增删改查…

Pandas数据可视化 - Matplotlib、Seaborn、Pandas Plot、Plotly

可视化工具介绍 让我们一起探讨Matplotlib、Seaborn、Pandas Plot和Plotly这四个数据可视化库的优缺点以及各自的适用场景。这有助于你根据不同的需求选择合适的工具。 1. Matplotlib 优点: 功能强大&#xff1a;几乎可以用于绘制任何静态、动画和交互式图表。高度可定制&a…

【酱浦菌-爬虫项目】爬取学术堂宏观经济学论文原文

前言 首先给大家放出完整代码&#xff0c;然后下面就是用jupyter写的代码。实际上在写的时候用的是jupyter写的&#xff0c;因为感觉jupyter写的时候更加的流畅&#xff0c;每一步运行的细节都能保存下来&#xff0c;更方便学习理解。 完整代码&#xff1a; import os impo…

基于深度学习检测恶意流量识别框架(80+特征/99%识别率)

基于深度学习检测恶意流量识别框架 目录 基于深度学习检测恶意流量识别框架简要示例a.检测攻击类别b.模型训练结果输出参数c.前端检测页面d.前端训练界面e.前端审计界面&#xff08;后续更新了&#xff09;f.前端自学习界面&#xff08;自学习模式转换&#xff09;f1.自学习模式…

Spring管理第三方依赖

在开发中&#xff0c;我们常需要根据业务需求导入我们需要的第三方依赖包&#xff0c;本文主要以导入druid数据库来连接池为案例讲解有关spring管理第三方依赖 目录 纯注解文件注入 1.在pom.xml中导入依赖 2.在com.lcyy包下建立一个config包用于配置类的实现 3.在config包下…

2024年第十五届蓝桥杯江苏省赛回顾

呜呜呜~~~ 我在考完了后感觉自己直接炸了&#xff1a;好多学到的算法都没有用上&#xff0c;几乎所有的题目都是暴力的。。。 最后十几分钟对于一道dp算法终于有思路了&#xff0c;但是。。匆匆忙忙之间就是没有调试出来。&#xff08;还是交了一道暴力[旋风狗头]直接哭死~~&…

微信小程序开发核心:样式,组件,布局,矢量图标

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Zynq 7000 系列之启动模式—NAND启动

NAND启动是一种使用NAND闪存进行设备启动的方式。NAND闪存是一种非易失性存储设备&#xff0c;广泛用于嵌入式系统、计算机和其他电子设备中。由于NAND闪存具有高速读写和较高的存储密度等特点&#xff0c;使得NAND启动成为了一种高效且常用的启动方式。 1 特点 NAND启动具有…

【Spring】Spring中AOP的简介和基本使用,SpringBoot使用AOP

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 一、AOP简介 AOP的全称是Aspect-Oriented Programming&#xff0c;即面向切面编程&#xff08;也称面向方面编程&#xff09;。它是面向对象编程&#xff08;OOP&#xff09;的一种补充&#xff0c;目前已成为一种比较成…

Milvus Cloud 向量数据库Reranker成本比较和使用场景

成本比较:向量检索 v.s. Cross-encoder Reranker v.s. 大模型生成 虽然 Reranker 的使用成本远高于单纯使用向量检索的成本,但它仍然比使用 LLM 为同等数量文档生成答案的成本要低。在 RAG 架构中,Reranker 可以筛选向量搜索的初步结果,丢弃掉与查询相关性低的文档,从而有…

电商技术揭秘三十九:电商智能风控技术架构设计

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…

简单分享,豆瓣小组,可能被你忽视的获取精准流量渠道!

⾖瓣⼩组&#xff1a;精准流量的隐藏宝藏 探索互联网世界的每一个角落&#xff0c;你会发现总有那么一些被忽视的宝藏&#xff0c;等待着被发现者的光临。今天&#xff0c;我要和大家分享的这个宝藏&#xff0c;就是⾖瓣⼩组——一个你可能未曾注意到的精准流量渠道。 ⾖瓣平…

2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包

本文来自&#xff1a;2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包 - 源码1688 应用介绍 简介&#xff1a; 2024最新UI发卡盗U/支持多语言/更新UI界面/支持多个主流钱包 自行检查后门&#xff0c;最好是部署智能合约后用合约地址来授权 包含转账支付页面盗U授…

蓝网科技临床浏览系统 deleteStudy SQL注入漏洞复现(CVE-2024-4257)

0x01 产品简介 蓝网科技临床浏览系统是一个专门用于医疗行业的软件系统,主要用于医生、护士和其他医疗专业人员在临床工作中进行信息浏览、查询和管理。 0x02 漏洞概述 蓝网科技临床浏览系统 deleteStudy接口处SQL注入漏洞,未经身份验证的恶意攻击者利用 SQL 注入漏洞获取…

HEVC/H.265视频编解码学习笔记–框架及块划分关系

前言 由于本人在学习视频的过程中&#xff0c;觉得分块单元太多搞不清楚其关系&#xff0c;因此本文着重记录这些分块单元的概念以及关联。 一、框架 视频为一帧一帧的图像&#xff0c;其编码的主要核心是压缩空间以及时间上的冗余。因此&#xff0c;视频编码有帧内预测和帧间…

TCP协议在物联网中实战

一、TCP协议介绍 网上对TCP协议介绍众多&#xff0c;本人按照自己的理解简单介绍一下。 TCP&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输控制层通信协议。 1.1 协议机制 1.1.1 三次握手 &…

面试重点1:打开网页点击URL,返回页面内容,从网络协议层面讲解一下

在这种场景下&#xff0c;从网络协议层面来讲解打开网页并点击 URL 的过程可以大致分为以下几个步骤&#xff1a; 1. DNS 解析 当你在浏览器中输入一个 URL&#xff08;例如 https://www.example.com&#xff09;&#xff0c;首先浏览器会进行 DNS 解析&#xff0c;将域名解析…

前端VUE项目中使用async()用法是为什么?能不用吗?

使用 async 关键字来定义一个函数主要有几个原因&#xff1a; 支持 await 关键字&#xff1a; async 函数允许你在其中使用 await 关键字&#xff0c;这使得你可以在不阻塞程序执行的情况下&#xff0c;等待一个异步操作&#xff08;如网络请求、文件读写等&#xff09;的完成。…

JAVA基础---Stream流

Stream流出现背景 背景 在Java8之前&#xff0c;通常用 fori、for each 或者 Iterator 迭代来重排序合并数据&#xff0c;或者通过重新定义 Collections.sorts的 Comparator 方法来实现&#xff0c;这两种方式对 大数量系统来说&#xff0c;效率不理想。 Java8 中添加了一个…

Python量化炒股的获取数据函数—get_concept()

查询股票所属的概念板块函数get_concept()&#xff0c;利用该函数可以查询一只或多只股票所属的概念板块&#xff0c;其语法格式如下&#xff1a; get_concept(security, dateNone)security&#xff1a;标的代码。类型为字符串&#xff0c;形式如‘000001.XSHE’&#xff0c;或…