Redux 是一种流行的状态管理库，它让前端开发更易于管理复杂的状态和应用逻辑。在 Redux 中，所有的状态都被保存在一个中央存储库（store）中，这个存储库可以在整个应用程序中被共享和访问。
在本文中，我们将讨论一些 Redux 的小技巧，这些技巧可以帮助你更好地使用 Redux，优化你的代码，并提升代码的可维护性。
技巧 1：拆分 Redux 的 reducer 函数
在 Redux 应用中，reducer 函数是非常关键的部分。它的作用是根据 action 的类型来更新应用程序的状态。根据应用程序的规模和复杂性，reducer 函数可能会变得非常大并难以维护。为了解决这个问题，你可以将 reducer 函数拆分成多个小的 reducer 函数，每个小的 reducer 函数只关心应用状态的一小部分。
示例代码
下面是一个简单的 reducer 函数，它处理了两个不同类型的 action。
-------- ------------- - ------------- ------- -
------------------- -
---- ------------ -
------ - ------ ----------- - - --
-
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
-你可以将它拆分成两个小的 reducer 函数：
-------- ---------------------- - ------------- ------- -
------------------- -
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
-
-------- ---------------------- - ------------- ------- -
------------------- -
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
-
-- --- ------- ----
----- ----------- - -----------------
---------- -----------------
---------- ----------------
---技巧 2：使用 Redux Thunk 处理异步 action
在 Redux 应用中，异步处理通常是一个烦人的问题。为了解决这个问题，我们可以使用 Redux Thunk，它是一个 Redux 中间件，可以帮助我们优雅地处理异步 action。
示例代码
下面是一个简单的 Redux Thunk 示例，它使用 fetch API 获取数据，并在获取数据后将数据存在 store 中。
-------- ------------ -
------ -------- -- -
---------- ----- ------------------- ---
---------------------------------------------------
-------------- -- ----------------
----------- -- ----------
----- ----------------------
-------- -----
---
------------ -- ----------
----- ----------------------
-------- -----
----
--
-
-- -- ---------- --
-----------------------------技巧 3：使用 Redux DevTools 调试应用
Redux DevTools 是一个非常实用的调试工具，它可以帮你查看应用程序的状态和 action 日志，以便更好地理解应用程序的工作流程，检查错误的原因，以及进行性能分析。
示例代码
如果你是通过 create-react-app 创建的项目，则可以按照下面的步骤启用 Redux DevTools：
- 安装 Redux DevTools：
--- ------- ---------- ------------------------
- 在代码中引入 Redux DevTools：
------ - ------------------- - ---- --------------------------- ----- ----- - -------------------- -----------------------
技巧 4：使用 Reselect 选择器优化性能
在 Redux 应用中，有时候需要从 state 中获取派生数据（例如，使用某些条件来过滤数组）。这是非常常见的情况，但是每次获取派生数据都需要重新计算一遍数据，这会影响应用的性能。
为了解决这个问题，我们可以使用 Reselect，它是一个轻量级且高性能的选择器库。
示例代码
下面是一个简单的 Reselect 示例，它返回派生数据的总数。
------ - -------------- - ---- -----------
----- -------- - ----- -- ------------
----- ------------------- - ----- -- -----------------------
----- ---------------- - ---------------
---------- ---------------------
------- ----------------- -- -
------------------------ -
---- ----------------- -
------ ----------------- -- ----------------
-
---- -------------- -
------ ----------------- -- -----------------
-
-------- -
------ ------
-
-
-
--
----- ------------- - ---------------
-------------------
--------------- -- --------------------
--技巧 5：使用 Redux-Saga 处理副作用
Redux-Saga 是一个基于 Redux 和 ES6 异步函数的库，它可以帮助我们更好地处理副作用，例如异步请求和定时器。
示例代码
下面是一个简单的 Redux-Saga 示例，它使用 takeEvery effect 监听 action，并发送异步请求：
------ - ---- --------- - ---- ---------------------
------ - ------------------ ----------------- - ---- ------------
--------- ------------ -
--- -
----- -------- - ----- ----------------------------------------------------
----- ----- - ----- ----------------
----- ------------------------------
- ----- ------- -
----- ------------------------------
-
-
--------- -------- -
----- ------------------------ ------------
-技巧 6：使用 Redux Persist 持久化存储
在大多数情况下，我们希望在刷新页面后仍然能够保留应用程序的状态。为了实现这个功能，我们可以使用 Redux Persist，它可以帮助我们将 Redux 的 state 持久化存储到本地存储中。
示例代码
下面是一个简单的 Redux Persist 示例，它使用 localForage 作为存储引擎：
------ - -------------- - ---- ---------------- ------ ----------- ---- -------------- ----- ------------- - - ---- ------- -------- ----------- -- ----- ---------------- - ----------------------------- -------------
技巧 7：使用 React-Redux 连接 Redux 和 React
在实际应用中，我们通常使用 React 标准库来渲染我们的应用程序，并使用 React-Redux 将 Redux 和 React 连接在一起以实现数据的传递和更新。
示例代码
下面是一个简单的使用 React-Redux 的番茄时钟示例：
------ - ------- - ---- --------------
------ - ----------- --------- - ---- ------------
-------- ------------- ----- ------- ------ -- -
----- - -------- - - -----
------ -
-----
-------------
-------------------
------- ----------------------------
------- ----------------------------
------
--
-
----- --------------- - ------- -- --
----- ----------
---
----- ------------------ - -
------- -----------
------- ---------
--
------ ------- ------------------------ ---------------------------------技巧 8：使用 Redux Form 处理表单
在 React 应用中，处理表单通常会导致冗长和重复的代码。为了解决这个问题，我们可以使用 Redux Form，它可以帮助我们更轻松地处理表单，减少代码量，提高代码可维护性。
示例代码
下面是一个简单的使用 Redux Form 的登录表单示例：
------ - ------ --------- - ---- -------------
-------- ----------- ------------ -- -
----- ----- - -- ------ -------- -- -- -
-- ---
--
------ -
----- -------------------------------
-----
---------------------
------ ------------ ----------------- ----------- --
------
-----
------------------------
------ --------------- ----------------- --------------- --
------
------- -------------------------
-------
--
-
--------- - -----------
----- --------
--------- ------ -- -
----- ------ - ---
-- --------------- -
------------ - ------ -- ----------
-
-- ------------------ -
--------------- - --------- -- ----------
-
------ -------
-
--------------
------ ------- ----------技巧 9：使用 Redux Router 进行路由管理
在 React 应用中，路由通常使用 React Router 管理。但是，如果将 Redux 和 React Router 结合使用，则可以实现更好的分离和单向数据流。
示例代码
下面是一个简单的使用 Redux Router 的例子：
------ - --------------- - ---- -------------------------
------ - ------ ------ - ---- -------------------
------ ----- ---- -----------------------
------ ---- ---- -----------------
-------- ----- ------- -- -
------ -
---------------- ------------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
--- --- ---
---------
------------------
--
-
------ ------- ----技巧 10：使用 Redux Observable 处理异步 action
Redux Observable 是一个基于 RxJS 的中间件，它可以帮助我们更好地处理异步 action。使用 Redux Observable，你可以轻松地将 WebSockets、定时器等功能作为 action 处理。
示例代码
下面是一个简单的 Redux Observable 示例，它使用 WebSockets 发送信息：
------ - --------- - ---- -----------------
------ - ------ - ---- -------------------
------ - --- - ---- -----------------
------ - -------------- - ---- ------------
----- ------- - ---------------------------------
------ ----- --------------- - ------- --
-------------
-----------------------
---------- -- ----------------
-------- -- -------------- ---- ---
--
------ ----- ------------------ - ------- --
-------------
------------ -- -------------------------
--结论
在这篇文章中，我们讨论了 10 个小技巧，这些技巧可以让你的 Redux 应用程序更加易于管理、更加优雅，使你的代码更加易于维护。如果你使用 Redux 来管理应用程序状态，那么这些技巧一定会对你的开发工作带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673492870bc820c58249eb57