npm 包 dva-immer 使用教程

前言

在前端应用开发中，状态管理和数据流管理是非常重要的，而React+Redux一直是前端开发中比较优秀的技术方案。但是，Redux在使用上存在一定的限制，如难以支持异步操作，使用繁琐等，这就需要更加高效的替代方案。

dva-immer是一个基于dva的State Management库，它能够简化React应用中的状态管理，同时通过immer帮我们简化数据更新流程。

什么是dva-immer

dva-immer是dva的一个插件，它充分利用了immer的特性，简化了Redux中dispatch的操作，使得我们在使用Redux的时候能够处理更加复杂的状态树，而且还能减少大量的Reducers。同时，dva-immer的API和Redux是兼容的，你可以使用Redux所有的Middleware和DevTool等扩展。

如何使用dva-immer

安装dva-immer

使用npm安装dva-immer：

--- ------- --------- ------

创建应用

在使用dva-immer之前，请确保您已经安装了latest版本的dva

------ ----- ---- --------
------ --- ---- ------
------ ------------- ---- --------------
------ ----------- ---- ------------
------ --- ---- -------------------

-- ----
----- --- - ------

-- ----
-------------------------

-- -------------
-----------------------

-- -------
-----------
  ---------- --------
  ------ -
    ---- --
  --
  --------- -
    --------------- -
      --------- -- --
    --
    --------------- -
      --------- -- --
    --
  --
---

-- ----
------------- -- ---- ----
-------------------

使用Model和Effect

Model和Effect和dva一样，只是状态树的更新使用了immer的语法

------ ------- -
  ---------- --------
  ------ ---
  --------- -
    ---------- ------- -
      ----- - -------- ---- - - -------
      -----------------
    --
    ------------- ------- -
      ----- - -------- ------ - - -------
      ----- ---- - -------------- -- ---- --- --------
      -------------- - ----------------
    --
  --
  -------- -
    -------------- - ----- --- -- -
      ----- ----- - ----- ---------------------
      ----- ----- ----- --------- -------- ----- ---
    --
  --
--

Store的使用

使用dva-immer后的store和Redux的很像，你可以使用Redux所有的api，但是Reducer更新状态时要使用immer的语法

------ - ------------ ---------------- ------- - ---- --------
------ -------------------- ---- -------------
------ - -------------- ------- - ---- ---------------------
------ ----------- ---- -------------

-- ---------
----- -------------- - -----------------------

-- -------------
----- ---------------- - ------ ------ --- -------- -- -------------------------------------------
  - --------------------------------------------- ---------------- ----- --
  - --------

-- -------
------ ----- --------- - --------- -- -
  ----- ----- - ------------
    ------------
    --------------------------------------------------
  --

  -- ----------------------------
  ----- ------------- - -------- -- -----------------------

  -- ----------------------------
  ----- ------------ - ---------------
  -------------- - -------- -- -
    -------------- ----- -------- -------- - ------ - ---
    ----------------------
  --

  -- ----------------
  -------------- - -----------------------------

  ------ ------
--

-- -----------------------------
------ ----- ------- - -------------------------

使用connect和Selectors

dva-immer也支持使用React-Redux的connect和Selectors

------ ----- ---- --------
------ - ------- - ---- ------------

----- ------- - -- ------ -------- -- -- -
  ----- -------- - -- -- -
    ---------- ----- ---------------- ---
  --
  ------ -
    -----
      --------------------
      ------- ----------- -- ---------- ----- ---------------- --------------
      ------- -----------------------------
    ------
  --
--

-- ------------------
----- --------------- - ------- -- --
  ------ ------------
---

-- -----------------
----- -------- - -
  ------ -
    ---- --
  --
--

------ ------- --------------------------------- ----------

总结

通过dva-immer这个插件，我们可以简化我们在使用Redux处理复杂状态树时的编码量，只需花费很少的时间来掌握dva-immer的API，就可以专注于业务逻辑的实现。更值得一提的是dva-immer的API和Redux中的API在很大程度上是兼容的，我们可以使用Redux的所有特性来管理状态，这无疑给我们开发带来了极大的便利。如果你正在使用dva构建React应用，请务必尝试dva-immer这个插件，它将为你开发带来全新的体验。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f3df2ebdbf7be33b256713e

阅读全文

猜你喜欢

  • npm 包 umi-types 使用教程

    前言 前端开发者在使用 React 时通常都会使用 umi.js 框架来进行项目的开发与管理。而在使用 umi.js 的过程中，开发者可能会遇到一些类型检查的问题。

    4 年前
  • npm 包 filereader 使用教程

    在前端开发中，操作文件是一项很常见的任务，而 filereader 正是一个能够在浏览器端读取本地文件并在页面中显示的 npm 包。本文将详细介绍 filereader 的使用，包括安装、引入、使用、...

    4 年前
  • npm 包 less-plugin-future-compat 使用教程

    在前端开发中，样式表是不可或缺的。而现代的 CSS 预处理器如 Less 的出现，更是使得样式表的编写变得更为高效和可管理。在 Less 中，使用各种插件也能进一步扩展其功能，从而让我们在样式表编写上...

    4 年前
  • npm 包 postcss-less-engine 使用教程

    在前端开发中，CSS 是我们必须要学习的一项技能，而在 CSS 领域中，LESS 作为一种常用的 CSS 预处理语言，被广泛应用。而本文将介绍一个使用 postcss-less-engine 可以更加...

    4 年前
  • npm 包 timemachine 使用教程

    作为前端开发人员，难免会遇到一些需要测试时间相关函数的场景，比如测试一个月份加减的函数，或者一个需要指定特定日期的场景，这个时候就需要我们假装时间前进或回退，而这个过程会非常繁琐和不可靠。

    4 年前
  • npm包assert-options使用教程

    当我们开发JavaScript应用程序时，经常需要验证配置对象的属性是否正确，并在检测到错误时发出相应的错误。在此情况下，assert-options是一个非常有用的npm包，它可以帮助我们轻松地做到...

    4 年前
  • npm 包 pg-minify 使用教程

    在开发前端应用的过程中，使用数据库进行存储和读取数据非常常见。而使用 PostgreSQL 数据库时，需要编写 SQL 语句来进行数据操作。但是，SQL 语句往往比较冗长且可读性不高，这给开发带来了一...

    4 年前
  • npm 包 spex 使用教程

    前言 在前端开发中，我们经常需要对数据进行增删改查等操作。而 在 Node.js 下，我们可以使用 PostgreSQL 这样的数据库来实现数据持久化。spex 是一个基于 Promise 的 Pos...

    4 年前
  • npm 包 read-env 使用教程

    简介 随着前端技术的快速发展，我们不得不面对环境配置的复杂性。配置环境变量是最基本的一项任务，然而在这个过程中我们面临的问题却往往是繁杂的。为了让我们更加方便的配置环境变量，在这篇文章中，我们将介绍一...

    4 年前
  • npm 包 api-problem 使用教程

    简介 api-problem 是 npm 上的一个 Node.js 工具包，它可以方便地将错误信息和 HTTP 状态码封装成符合 RFC7807 的 API Problem 对象，并返回到客户端。

    4 年前
  • npm 包 @apihawk/errors 使用教程

    前言 在开发中，随着代码量的增大与复杂度的提升，错误处理变得越来越重要。因此，分类和组织错误信息变得至关重要。在实际开发中，我们通常使用库或框架来处理这些错误信息。

    4 年前
  • npm 包 basic-auth-parser 使用教程

    什么是 basic-auth-parser？ basic-auth-parser 是一个用于解析 HTTP 基础认证的 npm 包。它将认证头解析为包含用户名和密码的对象，方便后续操作。

    4 年前
  • npm包 eslint-plugin-metrics 使用教程

    在进行前端开发的过程中，我们通常面临着代码的复杂性和可维护性的问题。针对这些问题，我们可以使用一些工具进行检测和优化。其中一种工具便是 eslint-plugin-metrics npm包，它可以帮助...

    4 年前
  • npm 包 eslint-config-cp 使用教程

    随着前端技术的不断发展，代码规范的重要性也越来越受到关注。而 eslint 是一款非常流行的 JavaScript 代码检查工具，可以帮助前端开发者自动检查代码中潜在的问题，保证代码的规范性和一致性。

    4 年前
  • npm 包 pa11y-reporter-cli 使用教程

    在前端开发的过程中，我们需要保证网站的无障碍性，也就是 Accessibility（缩写为 a11y），确保所有用户都可以平等地访问网站内容。为了简化这一过程，我们可以使用 pa11y 这款开源的 a...

    4 年前
  • npm包pa11y-reporter-csv使用教程

    什么是pa11y-reporter-csv pa11y是一个用于辅助开发者在网站或应用上自动化测试可访问性的命令行工具。它可以帮助开发人员识别和修复网站或应用中的可访问性错误和警告，并通过各种报告格式...

    4 年前
  • npm 包 pa11y-reporter-json 使用教程

    介绍 pa11y-reporter-json 是一个 pa11y 的报告工具，它能将 pa11y 执行测试的结果转换成 JSON 格式输出。该工具可以帮助您生成可读性强、易于维护的数据报告，以便您更好...

    4 年前
  • npm 包 pa11y-runner-axe 使用教程

    简介 pa11y-runner-axe 是 npm 上的一个包，它是一个 pa11y 运行器，使用了 axe-core 库来实现无障碍测试。它可以用于前端开发过程中，帮助我们发现并解决无障碍问题。

    4 年前
  • npm 包 pa11y-runner-htmlcs 使用教程

    随着 Web 应用的不断发展，越来越多的用户开始关注无障碍访问。尽管现代浏览器在实现无障碍访问方面表现良好，但是我们编写的网站依然可能包含一些无障碍问题。针对这个问题，我们可以使用 pa11y-run...

    4 年前
  • npm 包 @shopify/babel-plugin-convert-empty-typescript-file-to-es-module 使用教程

    在前端开发中，我们常常需要使用到各种 npm 包来辅助我们开发。其中，@shopify/babel-plugin-convert-empty-typescript-file-to-es-module ...

    4 年前

相关推荐

    暂无文章