Redux 代码管理的最佳实践
当我们在开发前端应用程序时，每个开发者都希望能够编写出易于维护和扩展的代码。Redux 可以帮助我们有效管理应用的状态，但如何使用它并没有一个明确的“正确”答案。在本文中，我们将介绍一些最佳实践，以帮助你编写更好的 Redux 代码。
- 分离数据和逻辑
Redux 的核心是一个存储在一个唯一的 Store 对象中的状态。但是，Redux 不仅仅是一个状态管理库。它的设计理念是将数据和逻辑分离开来，让你的状态成为你应用程序的“单一真相”。
在实践中，这意味着将所有逻辑操作与状态分离，并将其转移到 Redux 的 action 和 reducer 中。
首先，让我们看看一个典型的组件方法，以处理提交表单中的数据：
handleSubmit = () => {
const { username, password } = this.state;
api.post('/login', { username, password })
.then((res) => this.props.onLogin(res.token))
.catch((err) => console.error(err));
};上面的代码展示了一种很常见的应用场景 - 用户提交表单并向后端发送数据。然而，这个方法隐含了很多状态和逻辑操作：
- 从组件的 state 中提取表单数据。
- 调用 API 方法以发送数据到服务器。
- 处理服务器响应，调用 onLogin 动作。
所有这些操作都应该在 Redux 的 action 和 reducer 中执行。下面是由 Redux 管理表单数据和提交逻辑的一个示例：
-- -------------------- ---- -------
-- ------ --------
-------- ---------------------- --------- -
------ -
----- -----------------
-------- - --------- -------- --
--
-
-------- -------------- -
------ - ----- --------------- --
-
-------- ------------------- -
------ -
----- ----------------
-------- - ----- --
--
-
-------- ------------------- -
------ -
----- ----------------
-------- - ----- --
--
-
-- ----- ------ ------- - -----
-------- --------------- --------- -
------ ---------- -- -
-------------------------
------------------ - --------- -------- --
----------- -- -
----------------------------------
--
-------------- -- -
------------------------------
---
--
-
-- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- -----------------
------ - --------- ---------- -------------- --
---- ----------------
------ - --------- ------------ --------- --
---- ----------------
------ - --------- ------------ ---------- ------ -------------------- --
---- ----------------
------ - --------- ------------ ---------- ------ -------------------- --
--------
------ ------
-
-这里我们将表单数据作为 action，而不是组件状态进行处理。使用 setLoginForm（）方法将表单数据传输到 reducers 内，而不是将其作为组件 props 进行传递。我们还发起了一个所谓的 “thunk”，使用异步代码来处理登录操作（dispatch loginRequest 方法，处理服务器响应，dispatch loginSuccess 或 loginFailure 方法），而不是将其放在组件中处理。
- 使用 Redux Toolkit
Redux Toolkit 是一个由 Redux 核心团队开发的官方工具集，它可以生成大量样板代码，提供可重用的实用程序函数，以及避免常见的错误和陷阱的方式。
下面是使用 Redux Toolkit 重写上面的示例代码：
-- -------------------- ---- -------
----- --------- - -------------
----- -------
------------- -
---------- - --------- --- --------- -- --
------------ -------
------ -----
------ -----
--
--------- -
----------------- ------- ------- -- -
--------------- - ---------------
--
--------------- ------- -- -
----------------- - ----------
--
--------------- ------- ------- -- -
----------------- - ----------
----------- - ---------------------
--
------------ ------- ------- -- -
----------------- - ----------
----------- - ---------------------
--
--
---
----- - ----------------- --------------- --------------- ----------- - - ------------------
----- ----- - ---------- --------- -- ----- ---------- -- -
---------------------------
--- -
----- --- - ----- ------------------ - --------- -------- ---
------------------------- ------ --------- ----
- ----- ------- -
---------------------- ----- ----
-
--
----- ----- - ----------------
-------- -
----- ------------------
--
---可以看到，使用 Redux Toolkit 可以大大简化 Redux 的模板代码，并提供了更多的灵活性。我们在 createStore() 函数中使用 createSlice() 方法来创建一个 Redux slice，而不是手动定义 actions 和 reducer。在我们的组件中，我们只需调用由 createSlice() 方法生成的 actions，而不管其他细节。
- 小心使用 Redux 中间件
Redux 中间件是一个操作 dispatch() 方法的函数，通常用于处理异步事件、记录、分析和日志记录。虽然中间件对于管理复杂的应用程序非常有用，但如果使用不当，它们也会带来大量的复杂性和不必要的开销。
常见的 Redux 中间件包括 Redux Thunk、Redux Saga、Redux Observable、Redux Promise 等。像 Redux Thunk 这样的中间件可以使我们轻松创建异步 action creator，而 Redux Logger 可以记录在控制台中执行的所有操作。
然而，使用过多的中间件可能会导致应用程序变慢，并增加开销和复杂性。在构建应用程序时，请考虑中间件的数量和功能，并尽可能减少其数量。
- 保持组件与 Redux 解耦
在应用程序中使用 Redux 时，我们通常通过将 Store 分配给组件属性的方式进行数据传递。但是，这意味着我们的组件与 Redux 高度耦合，如果 Store 中的状态发生变化，我们的组件必须进行更新。
为了减少这种耦合性，我们可以使用 React Context 和 React Redux 等库来封装 Redux 实现，以便将其与组件分离。这个库会为我们处理将 Store 分配给子组件，将 action creators 和状态映射到组件 props 等操作。
下面是一个使用 React Redux 的例子：
-- -------------------- ---- -------
----- --------------- - ------- -- --
---------- ---------------------
------------ -----------------------
------ -----------------
------ -----------------
---
----- ------------------ - - ------ ------------ --
----- --------- - --
----------
------------
------
------
-------------
------
-- -- -
----- ------------ - --- -- -
-------------------
------------------------- --------------------
--
----- ----------------- - --- -- -
----- - ----- ----- - - ---------
-------------- ------- ----- ---
--
------ -
----- ------------------------
------
-----------
---------------
--------------------------
----------------------------
--
------
---------------
---------------
--------------------------
----------------------------
--
------- ----------------------------
------------ --- --------- -- ----------------------
------------ --- --------- -- ---------------------------
------------ --- --------- -- ----------- --------------
-------
--
--
------ ------- ------------------------ -------------------------------在这里，我们使用了 connect() 方法，将 Store 的状态和 action creators 分配给我们的 LoginForm 组件。connect() 方法的第一个参数，即 mapStateToProps() 函数，将 Store 中的状态映射到组件的 props 上。我们可以使用 mapDispatchToProps() 函数来将 action creators 与 Login 组件分配给同样的 props。
结论
Redux 是一个强大的状态管理库，可以用来有效地管理应用程序的状态。但是，为了编写干净、易于维护的代码，我们需要注意一些最佳实践。
在应用 Redux 中，我们需要学会正确分离数据和逻辑，使用 Redux Toolkit 进行代码生成和简化，小心使用 Redux 中间件，并保持组件与 Redux 解耦。这些最佳实践可以帮助我们编写更好的 Redux 代码，从而使我们的应用程序更加易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f23547a44b36ee5764a108