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 可以提供更加可预测的状态管理解决方案,从而实现更加高效和优秀的前端设计。
参考链接
- "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