npm 包 redux-toolkit 使用教程

前言

随着前端技术越来越成熟，大型应用中的状态管理变得越来越重要。Redux 是一个著名的状态管理库，但使用起来相对繁琐。redux-toolkit 就是为了简化 Redux 的使用而生的。在编写本文时，redux-toolkit 版本为 1.6.1。

安装

安装 redux-toolkit 显然需要安装 Redux。

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

然后安装 redux-toolkit。

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

使用

首先声明一个 module。

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

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

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

这里我们使用 createSlice 创建了一个名为 counter 的 module，该 module 有一个初始状态 { value: 0 } 和两个 action：increment 和 decrement。对应到 Redux 中就是：

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

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

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

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

相比于传统的 Redux 引入方式，使用 redux-toolkit 显然写得更简洁。

然后我们需要将该 module 注入到 store 中。

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

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

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

这里使用了 configureStore 来创建一个 store，其中的 reducer 属性是一个对象，对象的 key 是 module 的名字，value 是对应的 reducer。对应到传统的 Redux 引入方式就是：

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

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

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

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

到这里我们的 redux-toolkit 集成已经完成了，接下来我们可以在 React 组件中使用该 store。

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

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

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

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

这里我们使用了 Redux Hook useSelector 来获取状态，使用 useDispatch 来获取 dispatch 函数。对应到传统的 Redux 引入方式就是：

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

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

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

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

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

到这里，我们就学会了如何使用 redux-toolkit 来简化 Redux 的使用。

实战应用

我们可以使用 redux-toolkit 来管理一个完整的应用状态。

考虑到一个网站可能需要与后端通信，我们可以定义一个异步 action：

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

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

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

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

这里我们使用了 createAsyncThunk 来创建一个异步 action fetchUserById，该 action 会根据参数 id 发送一个 GET 请求，并返回 response 的 data。接着我们在 module 中没有定义任何 reducer，而是使用 extraReducers 定义了对应的 reducer。

对应到传统的 Redux 引入方式，这样的异步 action 可能需要写很多 boilerplate。而使用 redux-toolkit，我们只需要引入一个函数，就可以完成异步 action 的创建和 reducer 的定义。

然后我们将 userReducer 注入到 store 中，类似于之前的 counterReducer，这里不再赘述。我们可以在 React 组件中使用该 reducer 和 dispatch 函数。

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

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

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

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

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

这里使用了 Redux Hook 和 useEffect，当 userId 发生变化时我们会调用 fetchUserById 来获取用户数据，并更新组件的状态。

到这里我们就学会了如何使用 redux-toolkit 来简化 Redux 的使用，并在一个完整的应用中实践应用。

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

阅读全文

猜你喜欢

  • npm 包 spotify-wrapper-pponto 使用教程

    如果你是一位前端工程师，那么你一定知道 npm，它是一个非常强大的包管理工具，能够让你轻松地管理项目所需的所有依赖。 今天，我想向你介绍一个非常有用的 npm 包，它就是 spotify-wrappe...

    4 年前
  • npm 包 spotifyjs 使用教程

    前言 Spotify 是当前最流行的在线音乐平台之一，它的后端 API 提供了丰富的音乐数据，让开发者可以轻松地开发自己的音乐应用。而 Spotifyjs 就是一个基于 Spotify 后端 API ...

    4 年前
  • 使用 npm 包 spotify-wrapper-veloso

    什么是 npm 包 npm 是 Node.js 的包管理器，可以帮助开发者在项目中使用各种第三方包。npm 包是使用 npm 安装的代码库。在前端开发中，使用 npm 包能提高开发效率，减少重复工作，...

    4 年前
  • npm 包 sql-promise-helper 使用教程

    SQL 查询已经成为现代 web 开发中必不可少的一个技术。但是，SQL 查询的编写和管理可以是一项繁琐的任务。这时，npm 包 sql-promise-helper 就派上用场了。

    4 年前
  • npm 包 sphericalmercator 使用教程

    前言 Web 地图中坐标系转换是非常重要且常见的操作，其中 Mercator 投影是 Web 地图中最常用的一种投影方式，因为它可以在不失真的同时在 Web 等比例缩放的地图上进行坐标的展示和实现。

    4 年前
  • npm 包 sql-patch 使用教程

    在前端开发中，我们经常需要与数据库交互，而 SQL 是处理关系型数据库的标准语言。使用 SQL 可以方便地操作数据。而 sql-patch 是一个方便开发者操作 SQL 语言的 npm 包。

    4 年前
  • npm 包 sphero 使用教程

    简介 sphero 是一个基于 JavaScript 开发的轻量级的 npm 包，用于控制和操作球形机器人 sphero。本文将介绍如何安装 sphero，以及如何使用它来控制机器人。

    4 年前
  • npm 包 sphero-pwn 使用教程

    简介 sphero-pwn 是一个可用于控制 Sphero 机器人的 npm 包，提供了常用操作的 API，包括控制移动、颜色、音效等。本文将详细介绍 sphero-pwn 的使用方法和实现原理，并提...

    4 年前
  • npm 包 sphero-node-music 使用教程

    前言 sphero-node-music 是针对 Sphero 机器人的一款 npm 包，它允许开发者在 Node.js 环境下运行 Sphero 机器人的音乐。本文将详细介绍该 npm 包的使用教程...

    4 年前
  • 使用 sphero-pwn-macros 进行前端开发

    在前端开发过程中，我们常常需要使用一些第三方库或框架来辅助完成任务，但是在选择和使用这些工具时，需要考虑是否符合我们的需求、是否易于使用以及是否提供了足够的支持和文档。

    4 年前
  • npm 包 sphero-twitter 使用教程

    简介 sphero-twitter 是一个用于控制 Sphero 机器人的 npm 包，它允许你通过 Twitter 发送命令进行控制。sphero-twitter 包提供了一种简单快捷的方式来控制和...

    4 年前
  • npm包 sphero-websocket使用教程

    前言 目前，前端开发领域存在着很多的npm包，能够使得我们的开发过程变得更加的高效和便捷。其中一个比较重要的包就是sphero-websocket，在前端开发中，它可以实现对Sphero球的控制。

    4 年前
  • npm 包 Splittable 使用教程

    在前端开发中，我们常常需要对数组进行拆分，例如将一个大数组按照一定规则分割成多个小数组。这时候，我们可以使用 npm 包 Splittable 实现数组拆分，它提供了多种拆分方式，满足我们不同的需求。

    4 年前
  • npm 包 Splitted 使用教程

    什么是 Splitted？ Splitted 是一个由 Webpack 和 Babel 实现的模块分块工具。使用 Splitted 可以将代码分成多个模块，从而实现更快的加载速度和更好的性能。

    4 年前
  • npm 包 splitting-image 使用教程

    前言 随着 Web 网页的发展，用户对于网页性能的需求越来越高。其中，图片是影响网页加载速度和性能的关键因素之一。而 splitting-image npm 包就是为了解决这个问题而存在的。

    4 年前
  • NPM 包 Splitty 使用教程

    简介 Splitty 是一个基于 JavaScript 的 npm 包，用于将字符串或者数组拆分为指定长度的子数组或子字符串。它非常简单易用。 本文将介绍 Splitty 的使用方法和示例，帮助读者更...

    4 年前
  • npm 包 splitwith 使用教程

    在前端开发中，字符串操作是一项基本技能。而 npm 包 splitwith 则是一款非常实用的字符串分割工具。本文将介绍如何使用它。 安装 可以使用 npm 进行安装： --- ------- ---...

    4 年前
  • npm 包 splitweet 使用教程

    前言 在前端开发中，经常需要对字符串进行操作，其中最常见的就是字符串的拆分。npm 上有许多优秀的字符串操作库，比如 split-string、lodash 等。今天要介绍的是一款高效、易用的字符串拆...

    4 年前
  • npm 包 splitwise-node 使用教程

    简介 splitwise-node 是一个适用于前端开发的 npm 包，它可以帮助我们连接和操作 Splitwise API，从而方便地管理 Splitwise 中的账单和交易。

    4 年前
  • npm 包 splode 使用教程

    在前端开发中，我们常常需要把一些字符串转化为一个数组，或者拆分一个数组成为多个数组。这时候，npm 包 splode 可以帮助我们快速地解决这个问题。 在这篇文章中，我将向你展示如何使用 splode...

    4 年前

相关推荐

    暂无文章