Angular 中的状态管理与 Redux 简介

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,输入以下命令:

--- ------- ------ -----

然后你需要创建一个 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 可以提供更加可预测的状态管理解决方案,从而实现更加高效和优秀的前端设计。

参考链接

  1. "Redux Docs." Redux, redux.js.org/
  2. "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