Web 应用程序经常需要处理复杂的状态管理。为了实现更高效的状态管理，在 Angular 中，一些较小的应用程序使用本地状态管理技术，但对于较大规模的应用程序，需要更持久且可扩展的状态管理技术。Redux 是一种流行的状态管理技术，它是一个可预测的状态容器，适用于现代 Web 应用程序。在本文中，我们将深入探讨它在 Angular 中的应用。
什么是 Redux？
Redux 是一种 JavaScript 应用程序状态管理工具，它是单向数据流的状态管理模式。它涉及到一些概念和模式，如 Flux 模式、不可变性和纯函数。它由三个组件组成：Action、Reducer 和 Store。
• Action：它是表示应用程序中发生事件的纯对象。Action 描述了应该更新应用程序中的状态。
• Reducer：它是用来更新状态的函数。Reducer 接收一个先前的状态和一个 Action，并返回一个新状态。
• Store：它是应用程序的状态容器。它存储了应用程序的所有状态，并接收 Action，通过 Reducer 更新状态。
Redux 的核心思想是状态不可以直接更改，必须通过 Redux 提供的 Action 和 Reducer 进行间接更改。
为什么要在 Angular 中使用 Redux？
在 Angular 中使用 Redux 可以提供更好的应用程序状态管理技术和更好的代码组织结构。Angular 的组件使应用程序的状态管理工作变得更加易于理解和组织；而 Redux 提供了一个更加可预测的状态管理解决方案。
此外，使用 Redux 还可以更好地协作开发。因为所有的状态都存储在单个位置中，不同的开发人员就可以同时工作，而不会相互干扰彼此所写的代码。
在 Angular 中使用 Redux
Redux 可以与 Angular 集成或作为 Angular 应用程序的单独模块来使用。如果你将 Redux 作为模块使用，可以使用 Angular 的 Dependency Injection 来注入它的数据存储服务。
以下是一个简单的应用程序，用于演示如何在 Angular 中使用 Redux。
安装和设置 Redux
为了设置 Redux Store，您需要安装 Redux 包。可以使用 npm，输入以下命令：
npm install --save redux
然后你需要创建一个 Reducer。Reducer 用于更新状态。在 src/app 目录下创建文件“storeReducer.ts”：
-- -------------------- ---- -------
------ - ------ - ---- --------------
----- ------------ - -
-------- -
--
------ -------- ------------------ - ------------- ------- ------- -
------ ------------- -
---- --------------------
------ -
---------
-------- ------------- - -
--
---- --------------------
------ -
---------
-------- ------------- - -
--
--------
------ ------
-
-reducers 来不断监听 actions 的变化，不断地在 createStore 的时候使用来初始值在 store中的状态值。
将 Redux 集成到 Angular
下一步，您需要将 Redux 集成到 Angular 中。创建一个新的 Angular 服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
-------------
------ ----- ------------ -
------ ------- -------------------
------------------- ------ ------- -------- ------ --- -
----------- - ------------------ -- ---------------
-
----------- -
--------------------- ----- ------------------- ---
-
----------- -
--------------------- ----- ------------------- ---
-
-在这个服务中，我们导入 Store，并将一个对象传递到 Store 中。通过 select 方法，我们可以访问 Store 中的状态，并获取当前计数器的计数值。然后，我们可以使用 dispatch 方法分别增加或减少计数器。
在应用程序组件中使用 StoreService
现在，在组件中使用 StoreService 进行状态管理。在组件中导入 StoreService 并注入它，然后就可以访问状态并在需要的时候更改它们。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -------
------ - ------------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
----- - -----------------------
------- -------------------
------------------ -------- ------------- - -
---------- -
----------- - --------------------
-
----------- -
-------------------------
-
----------- -
-------------------------
-
-在这个组件中，我们只需要从 StoreService 获取当前计数器的值，并在需要时更改它们。
结论
使用 Redux 可以提供更好的状态管理技术和更好的代码组织结构。 Redux Store 可以方便地与 Angular 集成，使其成为 Angular 应用程序强大的状态管理工具。再加上 Angular 应用程序组件的易于组织和理解，使用 Redux 可以提供更加可预测的状态管理解决方案，从而实现更加高效和优秀的前端设计。
参考链接
- "Redux Docs." Redux, redux.js.org/
- "Adding Redux to an Angular 9+ App." Code Sourcery, 6 July 2020, codesourcemedia.com/adding-redux-to-an-angular-9-app/.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671d99539babaf620fb72065