React Redux 是目前前端开发中最受欢迎的状态管理库之一。它提供了一种有效的方式来处理应用程序中的状态，从而使代码更加清晰和易于维护。然而，如果我们不遵循一些最佳实践，就可能会导致代码可读性降低，性能下降，甚至可能会出现错误。本文将介绍 10 个在 React Redux 实践中遵循的建议，以帮助你编写更好的应用程序。
1. 使用 Redux Toolkit
Redux Toolkit 是一个官方支持的 Redux 工具集，它内置了 Redux 最常用的中间件和工具，同时也包括了一些简化了代码的 API。使用 Redux Toolkit 能够极大地减少写模板代码的时间，同时也会使我们编写代码时的开发效率更高。
-- -------------------- ---- -------
------ - --------------- ----------- - ---- ------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------- ------- -- ----- - --
---------- ------- -- ----- - -
-
--
----- ----- - ----------------
-------- --------------------
--
------ ----- - ---------- --------- - - --------------------
------ ------- -----上面的代码展示了如何使用 Redux Toolkit 编写一个简单的计数器应用程序。使用 createSlice 方法可以非常快速地创建一个 Reducer 和对应的 Action，而不需要手动编写其对应的类型和操作。
2. 避免在 Reducer 内部进行异步操作
在 Reducer 内部进行异步操作可能会导致应用程序性能下降，并且可能会出现一些意外的行为。在 Redux 中，异步操作应该由中间件来处理，而不是在 Reducer 内部进行操作。Redux 官方提供了一些流行的异步中间件，如 redux-thunk 和 redux-saga。
-- -------------------- ---- -------
------ - ------------ ---------------- - ---- -------------------
----- ------------- - ----------------------------------- ----- -------- --------- -- -
----- -------- - ----- ----------------------------------------------
------ ---------------
--
----- --------- - -------------
----- --------
------------- - --------- --- -------- ------ ------ ---- --
--------- ---
-------------- --------- -- -
-------
------------------------------- ------- -- -
------------- - ----
--
--------------------------------- ------- ------- -- -
------------- - -----
--------------------------------- - --------------
--
-------------------------------- ------- ------- -- -
------------- - -----
----------- - --------------------
--
-
--上面的代码演示了如何使用 createAsyncThunk 方法定义一个异步的 Action，并将其集成到 Reducer 中。
3. 使用 Reselect 减少计算量
Reselect 是一个非常实用的库，可用于优化 Redux 应用程序的性能。它可以缓存计算的结果，并在需要时提供一个有效的缓存，从而减少重复的计算。使用 Reselect，我们可以避免在每次状态更新时都重新计算需要的衍生状态，从而优化 Redux 应用程序的性能。
-- -------------------- ---- ------- ------ - -------------- - ---- ---------- ----- ---------- - ------- -- ---------- ------ ----- --------------- - --------------- ------------- ------ -- ---------- - ------ ----- ------------------- - --------------- ------------------ ------- -- ------------------ ----- -- --- - -------------- -- -
上述代码演示了如何使用 Reselect 来衍生从 Redux 状态中同一组数据中提取明确值的选择器，同时我们还演示了如何创建一个计算购物车条目数的选择器。
4. 尽量少地使用全局状态
在使用 Redux 时，我们应该尽量避免在应用程序的多个组件中去访问全局状态。如果我们必须在多个组件之间共享状态，最好将此状态提升到容器组件中，并作为属性传递给子组件。这样做可以使我们的组件更加易于维护，并且不会使我们的应用程序出现命名空间冲突的情况。
-- -------------------- ---- -------
------ - ----------- - ---- -------------
------ ----- --------------- - ------- -- ----------------
----- -------- - -- -- -
----- -------------- - ---------------------------------
------ -
---- ----------------------
-- ------------- ----------------------
----------------
------
-
-
----- ------------ - -- -- -
----- --------- - ----------------------------
------ -
---- --------------------------
--------------------- -- -
--------- ------------- ----------- --
---
------
-
-在上述代码中，我们定义了一些仅在单个组件中使用的选择器。在这种情况下，我们应该尽量只在需要使用该状态的组件中访问该状态。
5. 理解 Action 和 Reducer 改变状态的方式
Action 必须是一个简单的对象，通常包含一个 type 属性和一个可选的 payload 属性。Action 会通过 dispatch 方法触发，并且可以通过 Reducer 来改变状态。
Reducer 必须是一个纯函数，它接收当前状态和一个 Action 对象作为参数，并返回一个新状态。Reducer 不应该改变输入参数，也不应该进行任何网络请求、读写本地存储等副作用的操作。
-- -------------------- ---- -------
----- -------- - ----------
----- ------------ - -
------ --
-
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
--- ------------------
----- --------------------
---------- -----
-
-
-
--------
------ -----
-
-
----------------
----- ---------
-------- -
--- --
----- ---- -----
-
--上述代码演示了如何编写一个 Reducer，以及如何使用 store.dispatch 方法触发该 Reducer。
6. 避免选择器中引用组件的状态
选择器应该只使用 Redux 状态这一来源，而不应该访问组件的状态。这样做的好处在于，它使我们的选择器更加解耦，从而使我们的应用程序更加易于扩展和维护。
-- -------------------- ---- -------
----- --------------- - ------- -- ----------------
----- -------- - -- -- -
----- -------------- - ---------------------------------
------ -
---- ----------------------
-- ------------- ----------------------
----------------
------
-
-在上述代码中，我们使用 useSelector Hook 和 selectCartItemsCount 选择器来选择购物车中的商品数量。它只使用了 Redux 状态，而不依赖组件的特殊状态。
7. 避免过度使用中间件
虽然中间件是处理复杂业务逻辑不可或缺的机制，但是在使用时应该避免过度使用。过多的中间件可能会导致代码难以理解和维护，从而降低开发效率和代码质量。
8. 将数据规范化
在使用 Redux 时，我们应该尽可能地将数据规范化。这意味着我们应该尽可能地将数据拆分到多个存储区域中，而不是将所有数据存储在一个存储区域中。这样做可以使我们更好地组织数据，从而使我们的代码更容易理解和维护。
-- -------------------- ---- -------
----- ---------- - -------------
----- --------
------------- ---
--------- -
---------------- ------- -
----- - --- ---- - - --------------
--------- - - --- ----- ------ -- -
--
---------------- ------- -
----- - ------- -- - - --------------
----------------------------
-
-
--在上述代码中，我们将用户和帖子数据分别存储在 redux 状态中。这样做可以使我们更好地组织数据，并且使我们的代码更易于扩展和维护。
9. 使用 Redux DevTools 进行调试
Redux DevTools 是一个帮助我们调试 Redux 应用程序的浏览器插件。它可以帮助我们跟踪状态的变化、记录操作历史记录，以及回放、重放操作等。使用 Redux DevTools 可以极大地提高我们调试代码的效率和质量。
10. 编写可测试的代码
在编写 Redux 应用程序时，我们应该尽可能地编写可测试的代码。这意味着我们应该将状态的计算逻辑和视图分离开来，并将其封装在可测试的函数中。这样做可以使我们的代码更加灵活，易于测试，并且易于维护。
-- -------------------- ---- -------
----- ------------ - ------- -- ----------
------ ----- ------------------ - ---------------
---------------
------ -- ----------------------- ----- -- --- - ---------- - -------------- --
-
------------------------------ -- -- -
---------- ------ ------- ---- ------- -- -- -
----- ---- - - ------ -- ------ --- --------- - -- - ------ --- --------- - -- -
----- ------------- - --
--------------------------- ---- --------------------------
--
--上述代码演示了如何编写可测试选择器的简单示例。这样做可以使我们的选择器更加可靠，并提高我们的应用程序的代码质量。
结论
在实践中，使用 React Redux 可以极大地提高我们的应用程序的可维护性和可扩展性。遵循本文中讨论的最佳实践可以使我们编写更好的应用程序。这些建议包括使用 Redux Toolkit、避免在 Reducer 内部进行异步操作、使用 Reselect 等等。如果您已经掌握了这些技巧，您将更容易编写出高性能和易于维护的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a48e7d91dce0dc8801a85