Redux 是一个流行的 JavaScript 应用程序状态管理库。它的主要思想是将所有状态存储在一个中央存储库中,并使用纯函数来更改它。Redux 通过这种方式确保状态具有可预测性和可控性。
Redux 与 React 紧密结合,但其实也可以轻松集成到其他框架中。Redux 拥有广泛的社区,提供了许多有用的拓展和工具。如果您想使用 Redux,不管是在 React 中还是在其他应用程序中,本文将为您提供基础的指导和深度学习。
安装
要在您的应用程序中使用 Redux,您需要首先安装 Redux 包。您可以使用 npm 或 yarn 安装它。
npm install --save redux
或
yarn add redux
安装完成后,您就可以在应用程序中使用 Redux。
基本概念
Redux 提供了可预测的状态管理。这是因为它通过一个中央存储库来控制状态,并且使用纯函数来更改它。以下是 Redux 的主要概念:
Store
存储状态的地方。它是应用程序中唯一的状态源。只能使用纯函数来更改状态。
Action
一条指令,用于更改存储状态。它描述了将要发生的操作。它是一个带有 type 字段的对象。
Reducer
一个纯函数,用于更改存储状态。在 Redux 中,只能使用这些函数来更改状态。
Dispatch
用于向存储库发送 Action 的函数。它可以是一个简单的函数调用,也可以是使用中间件等高级技术的复杂操作。
Subscriber
监听存储库更改的函数。
示例
以下示例将介绍 Redux 的基本流程。我们将使用 React 库来构建应用程序,并将 Redux 用于状态管理。我们首先创建一个存储库。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在我们的应用程序中,我们有一个计数器。我们将创建两个按钮,一个用于增加计数器的值,另一个用于减少计数器的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------- -
----- -------- - --------------
----- ----- - ----------------- -- -------------
----- --------- - -- -- ---------- ----- ----------- ---
----- --------- - -- -- ---------- ----- ----------- ---
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-我们使用 useDispatch 钩子来访问 Redux 中的 dispatch 函数,并使用 useSelector 钩子来访问存储库中的状态。在这个例子中,我们使用它们来增加和减少计数器。当我们点击按钮时,会调用相应的 Action,并通过存储库来更新状态。
这个例子只是冰山一角。Redux 还有很多其他强大的功能,例如中间件和异步操作。希望本文能为您提供足够的指导和深度学习,以便您充分利用 Redux 库的功能。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780776ece7f4861253cad96