Dva.js(基础、简单例子解读)

这篇具有很好参考价值的文章主要介绍了Dva.js(基础、简单例子解读)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简单介绍一下

       近期在做react项目时,看到项目中数据的公共存储用的Dva.js,整体的代码结构看起来和vuex差不多,这两天趁着刚忙完,利用工作之余的时间空隙,大致了解了dva的基础理论,代码结构应用,参考着其他优秀的技术大神博主,今天也做个大致的整理。

大致了解Dva:什么是dva呢?dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。dva主要是为了降低组件之间耦合,简化元素,来降低开发难度。

数据流向:数据的改变发生通常是通过用户交互行为或者浏览器跳转行为来触发。

Dva.js(基础、简单例子解读)

 这里图简单解读一下,通过dispatch 来触发action。如果是同步行为 通过 reducer 来改变 state的状态,异步行为的话,通过 effect 来触发 reducer 再改变 state

        1)这里的 Effect 指的是副作用,根据函数式编程,计算以外的操作都属于 Effect。

Dva概念:先上一段demo代码

app.model({
  namespace: 'todo',
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      // 保存数据到 state
      return [...state, todo];
    },
  },
  effects: {
    *save({ payload: todo }, { put, call }) { // 第一个参数要传的值,第二个是Generator函数中的方法
      // 调用 saveTodoToServer,成功后触发 `add` action 保存到 state
      yield call(saveTodoToServer, todo); // 第一个值函数名称,第二个值传递的参数
      yield put({ type: 'add', payload: todo }); // 第一个值reducer名称,第二个值传递的参数
    },
  },
  subscriptions: {
    setup({ history, dispatch }) {
      // 监听 history 变化,当进入 `/` 时触发 `load` action
      return history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({ type: 'load' });
        }
      });
    },
  },
});

1) namespace dva 的命名,它就相当于一个 key ,通过这个 dva 命名来使用,处理 state 等一些列数据。

        举个例子在组件中使用:

import { connect } from 'dva';

function mapStateToProps(state) {
      return { 
            todos: state.todos 
      };
}
connect(todo)(mapStateToProps); //dva的命名:todo

2) State 是储存数据的地方,收到 Action 以后,会更新数据。

这里的 Action 是用来描述 UI 层事件的一个对象。

{
  type: 'add',
  payload: todo
}

3)select

  • Dva中 Effects 函数的固定传参
  • 用于拿到model中 state 的数据,需要注意的是,state 后面跟命名空间 namespace的值
const data = yield select((state) => state.namespaceName.valueName);

4)   call

  • Dva中 Effects 函数的固定传参
  • 第一个参数是一个异步函数,payload 是参数,可以通过 call来执行一个完整的异步请求,又因为 yield的存在,就实现了异步转同步的方案
const { data } = yield call(queryInterface, payload);

5) put

  • 发出一个 Action,类似于 dispatch
  • Dva中 Effects 函数的固定传参
yield put({ type: 'add', payload: todo });

本文章参考 http://t.csdn.cn/OnSgX文章来源地址https://www.toymoban.com/news/detail-416963.html

到了这里,关于Dva.js(基础、简单例子解读)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 简单介绍一下YOLO算法发展历程

    前言: Hello大家好,我是小哥谈。 随着人工智能技术的发展,YOLO算法已经成为了一个热门话题。到目前为止,YOLO算法已经经历了多个版本的发展迭代,许多研究者对YOLO算法进行了改进和创新。为了让大家理解的更透彻,本文就由浅入深的向大家介绍YOLOv1到YOLOv5的发展历程,

    2024年02月05日
    浏览(56)
  • Android NDK基础介绍及例子

    目录 null NDK介绍 java调用c的步骤 一、NDK/JNI NDK JNI -那么为什么需要在Android上去使用C/C++代码? NDK开发 新建一个Native项目 设置调试模式 编写编译脚本文件CMakeLists.txt 加载C/C++库 (1)加载APK中的C/C++库文件 (2)加载外部的C/C++ so库 实现Java和C++互相调用 生成so文件 参考 Android开

    2024年02月11日
    浏览(39)
  • 简单的用Python实现一下JS逆向解密,采集空气质量数据

    最近天气降温厉害,咱们用 Python 来分析一下空气质量如何~ 话不多说,我们直接开始上手。 环境使用 Python 3.8 Pycharm nodejs 模块使用 import requests import execjs import json requests 和 execjs 都是第三方模块,需要手动安装,直接pip install 加上模块名字即可。 明确需求: 明确采集的网站

    2024年02月05日
    浏览(58)
  • 简单介绍一下centos上有什么工具可以优雅的管理开机启动项

    在CentOS上,你可以使用以下工具来优雅地管理开机启动项: systemctl:systemctl 是 systemd 系统和服务管理器的主要命令。它提供了一种优雅的方式来管理启动项。你可以使用 systemctl 命令来启用、禁用、查看和管理系统服务。例如,要启用一个服务,可以使用 systemctl enable servi

    2024年02月11日
    浏览(49)
  • React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式

    上文 React Dva项目中模仿网络请求数据方法 中,我们书写了Dva项目模拟后端数据的方式 但是 我们.roadhogrc.mock.js中的这个处理其实并不好用 我们还需要一个一个的引入 我们可以直接靠一段代码 这就是一个读流的方式 获取mock目录下的所以文件 然后找出后缀为 .js的文件 全部弄

    2024年02月15日
    浏览(34)
  • 4年测试经验面试要20K,简单问了一下,连基础都不会,我也是醉了····

    现在招个合适的人可真难呀,不是这不会就是那不会,没有一个让我满意的··· 公司前段时间缺人,面试了不少的测试,结果居然没有一个符合要求的。一开始瞄准的就是中级测试工程师的水准,也没指望来技术大牛,提供的薪资在10-20k,面试的人很多,但平均水平很让人失

    2024年02月08日
    浏览(60)
  • 请简单介绍一下Shiro框架是什么?Shiro在Java安全领域的主要作用是什么?Shiro主要提供了哪些安全功能

    会话管理(Session Management):Shiro能够管理用户的会话状态,包括会话的创建、维护和销毁。它支持多种会话存储方式(如内存、数据库等),并提供了会话超时、会话失效等机制,以确保会话的安全性。 跨平台集成:Shiro不仅适用于Web应用程序,还可以轻松集成到桌面应用

    2024年04月13日
    浏览(60)
  • 请简单介绍一下Shiro框架是什么?Shiro在Java安全领域的主要作用是什么?Shiro主要提供了哪些安全功能?

    请简单介绍一下Shiro框架是什么? Shiro框架是一个强大且灵活的开源安全框架,为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能,可以轻松地集成到任何Java Web应用程序中,并提供了易于理解和使用的API,使开发人员能够快速实

    2024年04月11日
    浏览(58)
  • 解读一下最近Midjourney开放的中国版

    最近Midjourney在中国开放测试申请,吸引了众多朋友加入,但也存在许多问题需要解答。因此,我决定撰写一份使用指南,以帮助大家更好地理解与国际版的差异。 接下来,我将分为两个部分进行详细介绍,其中一部分涵盖了免费用户可使用的功能和限制,而一些基础功能也

    2024年02月13日
    浏览(45)
  • three.js 基础认识与简单应用

    学习总结初衷:          1. 公司项目需要。         2. 做一下笔记,方便以后学习查看,好记性不如烂笔头;也能筑固基础,加深印象。         3. 现在国内关于Three.js的学习资料很少,总结一下多多少少也能给有需要的小伙伴一些帮助。 1. 什么是three.js?你将它理解成

    2024年02月03日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包