随着前端项目的日益庞大，状态管理变得越来越重要。Redux 和 Thunk 是 React 中用于管理状态的两种流行工具。Redux 提供了一种流程，让应用中的所有数据流向一个 中心化 的 “ store ”，从而实现了单向数据流的管理。Thunk 则用于处理特定的异步事件，以便更好地控制 Redux 状态的变化。本文将在详细介绍 Redux 和 Thunk 的同时，为读者提供一些有用的示例代码和指导意义。
Redux
Redux 是一个 JavaScript 库，通过在应用程序中实现中心化的数据存储机制，使状态管理变得更加可预测。Redux 接受应用程序中所有的状态，并将它们存储在一个数据存储区域中。这个中心化的存储库被称为 “store”，而作为驱动这个存储库变化的行动则被称为 “action”。最后，通过一种叫做 “reducer” 的函数，Redux 将 action 转化为新的 state 并更新到 store 中。
以下是示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- -- -------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-- -- -----
--- ----- - ---------------------
-- -- ------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---
-- -- -----
------------------------------Redux 的主要特点是单向数据流和无可修改的状态。这意味着应用程序中的所有状态都被锁定并由 Redux 管理。要更改状态，必须通过触发 action 并调用 reducer 函数，使变化逐步反映在整个应用程序中。
Thunk
Thunk 是一个用于处理 Redux 异步 action 的简单中间件。Thunk 允许在 action 中仅调用一个函数，而不是必须传递一个对象。这使得在 action 中添加额外的逻辑成为可能，例如调用异步 API 的情况。
以下是示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
-- -- -------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
-- -- -----
----- ----- - ------------
--------
----------------------
--
-- -- -----
-------- ------------------- -
---------------------------------------------------
-------------- -- ----------------
---------- -- ---------- ----- ------------- -------- ---- ----
-
-- ---- ------
--------------------------在此示例中，我们使用了 redux-thunk 中间件来处理异步 action。fetchData() 函数接受一个 dispatch 参数，并使用 fetch API 来获取远程数据。由于此函数返回的是另一个函数，直到调用这个新函数时，异步请求不会被触发。在这个新函数中，我们被提供了一个 dispach 方法，用于触发我们的 action，以便更新 Redux 存储中的状态。
结论
Redux 和 Thunk 是 React 中常用的状态管理工具，有助于简化状态管理中的复杂度和提供更好的可维护性和扩展性。另外，Redux 和 Thunk 还提供了一种结构化和组织化的方法来处理应用程序中的多个状态变量。尽管学习和使用 Redux 和 Thunk 可能需要一定的时间和努力，但它们在应用程序开发中的价值是不可置疑的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675140ad8bd460d3ad87c3f6