npm 包 redux-optimistic 使用教程

何为 redux-optimistic

redux-optimistic 是一个 Redux 的增强库，它可以在 Redux 中实现乐观更新。Redux 的状态管理中，每次 dispatch action 都是同步更新状态的，而 redux-optimistic 可以允许我们在发送一个 action 后，可以先在本地对状态进行更新，等待服务端响应后再进行最终更新。这一过程可以给用户更好的交互体验和更快的响应速度。

如何安装和使用

redux-optimistic 是通过 npm 来安装和使用的，可以使用以下命令来安装：

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

之后，在 Redux 中引入 redux-optimistic，使用 optimistic 函数增加中间件，如下所示：

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

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

然后我们便可以在 action 中使用 optimistic 函数对 action 进行封装，如下所示：

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

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

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

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

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

其中，optimistic 函数的参数是一个对象，它包含了 action 的 type、payload 等信息，在 meta 中，我们可以指定向后端发送什么样的请求，并在获取到响应后进行处理。在 action 创建函数返回的 action 中，我们需要根据是否有错误以及是否为乐观更新来处理状态。

在 reducer 中，我们需要对 action 进行判断，如下所示：

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

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

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

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

在 reducer 中，我们首先判断 action 是否为失败状态，然后判断当前是否为乐观更新，最后再对成功状态进行处理。

示例代码

接下来，我们将编写一个简单的 TodoList 来展示 redux-optimistic 的使用。

安装依赖

首先，我们需要安装 React 和相关依赖：

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

其中，react-redux 负责将 React 组件与 Redux 进行绑定，redux-thunk 负责处理异步请求，redux-optimistic 则是我们本文的主角。

编写组件

然后，我们开始编写一个简单的 TodoList 组件。

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

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

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

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

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

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

在组件中，我们通过 useSelector 来获取 Redux store 中的状态，而通过 useDispatch 来获取 dispatch 方法，从而可以 dispatch 一个 action。

在组件中，我们通过 addTodoRequest action 来对 Todo 进行添加操作，其中第二个参数为创建一个“临时 ID”，用来在本地先更新 Todo 列表。

编写 action

接下来，我们编写 addTodoRequest action，其中使用了 optimistic 函数进行封装：

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

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

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

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

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

在 action 中，我们将 optimistic 函数进行了包装，其中 meta 指定了我们向服务器发送请求的相关信息。

编写 reducer

最后，我们编写 reducer，处理我们最初为本地数据所添加的“临时 ID”：

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

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

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

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

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

在 reducer 中，我们首先处理错误状态，然后处理乐观更新状态，最后再处理真正的修改状态。

总结

通过以上的例子，我们可以看到，使用 redux-optimistic 可以让我们在 Redux 中实现乐观更新，从而达到更好的用户交互和响应速度。但是需要注意，乐观更新也会带来一些问题，例如某些场景下的冲突检测等，需要我们根据使用场景进行考虑。

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

阅读全文

猜你喜欢

  • npm 包 webofthings 使用教程

    什么是 Web of Things？ Web of Things（WoT）是互联网物联网的新一代标准，它可以将万物互联起来，打造智慧城市、智能家居、智能工业等新型应用。

    4 年前
  • npm 包 weborm 使用教程

    前言 在前端开发中，与后端配合使用数据库是必不可少的一环。然而，对于前端来说，操作数据库往往会遇到很多麻烦。weborm 是一个可轻松操作数据库的 npm 包，它可以帮助我们简化与数据库的交互流程。

    4 年前
  • npm 包 webos-tv-library 使用教程

    随着智能电视的逐渐流行，越来越多的人开始关注如何在智能电视上开发应用。WebOS 平台是 LG 智能电视的首选操作系统，为了帮助开发人员更便捷地创建 WebOS 应用程序，现在有一个非常流行的 npm...

    4 年前
  • npm 包 webmount 使用教程

    在前端开发中，我们经常会遇到需要把一个网页嵌入到另一个网页中的情况。这时候，我们常常会去编写一些繁琐重复的代码来完成这项工作。但是，有了 npm 包 webmount，我们就可以轻松地解决这个问题。

    4 年前
  • npm 包 webring 使用教程

    介绍 npm 是 Node.js 的包管理器，提供了许多方便的工具和库，webring 是其中一个 npm 包，它可以用于在静态网站中实现类似于 webring（Web 圈）的导航功能，以实现网站之间...

    4 年前
  • npm 包 webriq-roots-markdown-to-json 使用教程

    Markdown 是一种轻量级标记语言，经常用于写博客、文档、论坛帖子等。但是，在实际应用中，我们需要将 Markdown 转换为其他格式，例如 HTML、JSON 等。

    4 年前
  • npm 包 webriq-roots-rss-generator 使用教程

    在前端开发中，动态生成 RSS(feed) 是一项必不可少的任务。而 webriq-roots-rss-generator 是一个在 Roots 内使用的简单的 RSS 生成器。

    4 年前
  • npm 包 webriq-roots-sitemap-v2 使用教程

    介绍 webriq-roots-sitemap-v2 是一个可以在 static site generator 中生成 Sitemap 的 npm 包。该包可以自动生成网站的 Sitemap 文件，方...

    4 年前
  • npm 包 webraft 使用教程

    webraft 是一个基于 React 的 Web 端 Raft 状态机库。在前端状态管理方案中，Raft 状态机已经很成熟且广泛应用，但是在前端使用起来比较麻烦。

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

    前言 在前端开发中，我们经常需要与各种 API 进行交互，其中最常用的就是与微信公众号进行交互，这时候我们会用到一个叫做 webot-cli 的 npm 包。 webot-cli 是一个提供命令行交互...

    4 年前
  • npm 包 webot-debug 使用教程

    简介 在前端开发过程中，可能会使用一些自动化工具或框架来辅助开发。而开发过程中面临的问题也需要有一定的调试手段。今天我们将介绍使用 npm 包 webot-debug 来辅助前端调试的方法。

    4 年前
  • 使用 npm 包 webot-meiva

    在前端开发中，我们经常需要使用一些 JavaScript 库或框架以快速完成某些特定的任务。而 npm 则是一个很好的工具，用于管理和共享这些开源的 JavaScript 包。

    4 年前
  • NPM 包 webpack-lean 使用教程

    什么是 webpack-lean webpack-lean 是一个基于 webpack 的简化封装工具，用于快速构建前端应用的打包工具。它具有以下特点： 快速：能够快速构建简单项目的打包任务。

    4 年前
  • npm 包 webpack-libify 使用教程

    介绍 webpack-libify 是一个基于 webpack 的库构建工具，可以将您的 JavaScript 库转换为符合 CommonJS、AMD 或 UMD 规范的包。

    4 年前
  • npm 包 webpack-licenses-plugin 使用教程

    在前端开发中，借助现有的开源工具能够有效提高工作效率。webpack-licenses-plugin 就是一款值得推荐的 npm 插件，该插件可用于生成第三方开源组件的使用证书，方便开发者审核使用情况...

    4 年前
  • npm 包 webpack-link 使用教程

    webpack-link 是一个方便的 npm 包，可用于在开发过程中在模块之间创建链接，从而提高模块化的开发效率。在前端开发中，使用 webpack 是非常普遍的，因此掌握如何使用 webpack-...

    4 年前
  • npm 包 webpack-listener 使用教程

    前言 在前端开发中，我们经常使用 webpack 打包工具进行模块化开发，而在开发过程中，我们需要及时了解到每一个模块打包后的状态，包括是否成功打包、打包大小等等。

    4 年前
  • npm包 webpack-livereload-plugin-css 使用教程

    前言 在前端开发中，我们经常需要实时预览代码的效果来调试。为了方便开发者在开发过程中实时查看运行效果，webpack提供了一个livereload插件，可以自动刷新浏览器，以便开发者在保存代码后可以看...

    4 年前
  • npm 包 webrouter-location-origin 使用教程

    在前端开发中，使用路由系统是一项必不可少的功能。npm 包 webrouter-location-origin 则是一个可以帮助我们控制路由系统的工具。本文将介绍如何使用 npm 包 webroute...

    4 年前
  • npm 包 webrpc 使用教程

    WebRPC 是一个开源的通用 RPC 框架，提供跨语言和跨平台的数据传输和服务调用功能。通过 WebRPC，我们可以在前端和后端之间传递数据，实现不同应用之间的无缝交互。

    4 年前

相关推荐

    暂无文章