随着前端技术的不断发展，数据状态管理变得越来越重要。Angular作为一款流行的前端框架，提供了很多实用的机制帮助你管理你的数据状态。其中之一是使用Redux状态容器管理your data。
Redux状态容器简介
Redux是一个流行的状态容器，它可以让我们方便地管理应用程序的状态。Redux有三个核心组件：Actions, Reducers, 和 Store。下面是这三个部分的简单解释:
- Actions（行动）是一个简单的对象，它描述了发生了什么。
- Reducers（缩减器）是一个纯函数，它接受一个Action和当前的状态，并根据Action更新状态。
- Store（商店）是在应用程序中维护状态的地方。它存放了当前的状态，并提供了访问状态、调度Actions并订阅状态更改的方法。
在这个模式中，我们可以通过Reducers更新状态，或者通过dispatching actions来触发Reducers。
将Redux集成到Angular中
Redux状态容器是一个很好的工具，但是要使用它正确，就必须正确地将它集成到Angular 应用程序中。下面是一个简单的应用程序，它展示了如何将Redux状态容器集成到Angular中。
安装必要的依赖
为了使用Redux，我们得依赖这些包：
npm install --save redux npm install --save @ngrx/store
创建、连接、启动Redux Store
我们需要创建一个需要存储的初始值，连接Store到应用程序中，然后启动Store。
首先要创建一个模块来存储Store。 创建store.module.ts：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------- - ---- -------------- ------ - ----------- - ---- ----------------- ----------- -------- ------------------------------------- ---------- -- -- ------ ----- -------------- --展开代码
在这里，我们引入StoreModule和rootReducer，然后在imports数组中注册StoreModule.forRoot({rootReducer})。我们将应用程序的根Reducer传递给StoreModule，以便Store知道如何处理状态。
然后我们必须将Store分配给应用程序，并通过提供器注入Store提供者来实现这一点。打开app.module.ts，并将AppStoreModule添加到导入列表中：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - -------------- - ---- ----------------------- ----------- ------------- - ------------ -- -------- - -------------- ------------ -------------- -- --- --- --- ----------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
现在，Store已经被写入应用程序中，我们可以在需要时访问它。
Dispatching Actions Triggering State Changes
现在我们已经准备好将Redux与Angular集成在一起了！
在我们的应用程序中，我们需要找到Dispatch Actions的适当位置，并确保Store能够接收这些Actions并根据这些Actions更新应用程序状态。我们可以在应用程序组件中调度Actions，Actions会通过reducer更新应用程序的状态，然后通知了Store。
首先，我们需要定义动作类型和行动。在例如模块中。
定义动作类型：
export const ADD_TODO = 'ADD_TODO'; export const REMOVE_TODO = 'REMOVE_TODO'; export const COMPLETE_TODO = 'COMPLETE_TODO';
然后我们为每个Action定义一个函数来实际触发每个Action，将其发送到Store.dispatch，并将State对象作为参数传递给reducer。
-- -------------------- ---- ------- ------ - --------- ------------ ------------- - ---- ------------------ ------ -------- ------------------- - ------ - ----- --------- -------- ---- -- - ------ -------- ---------------------- - ------ - ----- ------------ -------- ---- -- - ------ -------- ------------------------ - ------ - ----- -------------- -------- ---- -- -展开代码
这些函数简单地返回一个对象，它描述了要触发的Action以及要传递给reducer的数据。例如，addTodoAction 返回一个描述ADD_TODO Action的对象，并将Todo对象（将被添加到任务清单中的任务）作为有效载荷传递。
Reducers
现在我们必须编写reducers将状态更新为新状态。
-- -------------------- ---- ------- ------ - --------- ------------ ------------- - ---- ------------------ ------ -------- ----------------- - --- ------- - ------ ------------- - ---- --------- ------ ---------- ---------------- ---- ------------ ------ ----------------- -- ------- --- ------------------- ---- -------------- ------ -------------- -- - -- -------- --- ------------------ - ------ ----------------- ----- - ---------- --------------- --- - ------ ----- --- -------- ------ ------ - -展开代码
在此代码中，我们编写了一个名为rootReducer的函数。此函数是Reducers的入口点，它的作用是根据在Action中描述的条件更新State。在我们的应用程序中，rootReducer接受两个参数：
state, 当前状态action当前的行动
最后
我们已经跨进了用Angular 集成Redux 的一步，现在我们将能够使用Actions，并使用Reducers更新我们的数据状态，并且Store 将处理这种更改。如果你想看完整的代码示例，请阅读下面的完整代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------- - ---- -------------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------------- -- ------ ------ ----- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ ----- ------------- - ---------------- -- ------ ------ -------- ------ -------- ------------------- - ------ - ----- --------- -------- ---- -- - ------ -------- ---------------------- - ------ - ----- ------------ -------- ---- -- - ------ -------- ------------------------ - ------ - ----- -------------- -------- ---- -- - ----------- ------------- - ------------ -- -------- - -------------- ------------ --------------------- ----------- -- -- ---------- --- ---------- -------------- -- ------ ----- --------- - - ------ - --------- ------------ ------------- - ---- ------------------ ------ -------- ----------------- - --- ------- - ------ ------------- - ---- --------- ------ ---------- ---------------- ---- ------------ ------ ----------------- -- ------- --- ------------------- ---- -------------- ------ -------------- -- - -- -------- --- ------------------ - ------ ----------------- ----- - ---------- --------------- --- - ------ ----- --- -------- ------ ------ - -展开代码
我们希望本篇文章可以帮助你了解如何使用Redux管理你的Angular应用程序的数据状态。随着你使用更多的Redux，将会更容易理解并处理数据状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67becf080c976d473a311eb3
