使用 Redux 进行 Angular 数据流
在 Angular 应用程序中使用 Redux
引言
我们遇到了许多在 Angular 组件层级之间传递数据的问题。Redux 是在组件之间流动数据的最佳解决方案。这样，当任何组件更改数据时，使用/订阅该数据的所有组件都会得到反映。在这里，我将建议如何在现有或新的 Angular 应用程序中实现 Redux。我们将遵循手动方法，而不使用像 ng-redux2 等库。
注意：我假设您已经具备 Angular 和 Typescript 的知识，因为我在本文中同时使用了它们。
背景
Redux 是一个用于管理应用程序状态的开源 JavaScript 库。是否要在应用程序中使用 Redux 完全取决于您。您甚至可以不使用 Redux 创建 Angular 应用程序，但在创建大型应用程序时，管理应用程序状态会非常困难。
Using the Code
在这里，我们将 Redux 安装到我们的应用程序中，然后使用 Action、Reducer 和 Store 来实现单向数据流。
Redux 安装
使用以下命令将 Redux 安装到您的 Angular 应用程序中。
npm install redux --save
要实现 Redux，您必须了解三件事：Store（状态容器）、Reducers（纯函数）和 Actions（事件载荷）。
- Store：Store 维护或提供应用程序的状态。
- Reducers：Reducers 用于创建新状态。
- Actions：Actions 是将数据从应用程序发送到 Store 的信息载荷。它们是 Store 的唯一信息来源。您使用
store.dispatch()将它们发送到 Store。
数据流
场景
假设您有一个显示评论的 Angular 应用程序。我使用假 JSON Web API 创建了一个 Angular 应用程序。您可以使用以下 URL 查看数据。
https://jsonplaceholder.typicode.com/comments
您可以从我的 gitHub 存储库中获取 Angular 应用程序代码。链接在文章末尾。这是一个 CRUD 应用程序。
模型
export class CommentsModel {
public postId: number;
public id: number;
public name: string;
public email: string;
public body: string;
}
State Interface（状态接口）
我们正在创建接口，让 Redux Store 知道我们要存储哪种类型的应用程序状态。稍后，我们将使用此接口来创建 Redux Store。
在下面的代码中，我们正在导入 comment 模型。接口中的 object 属性保存了上述模型的数组。这意味着我们的 Redux Store 将包含 comment 模型数组。
import { CommentsModel } from "../Model/Comment.Model";
export interface IAppState {
object: CommentsModel[],
}
Actions
Angular 组件可以触发 Actions 来更新对象的状态。每个 Action 都必须有一个 type 属性，Reducer 将使用它来了解它需要为哪个 Action 创建新状态。在这里，我们将 commentsModel 作为应用程序的应用程序状态。
在下面的代码中，AddComments 是将由 Angular 组件触发的 Action。它将在 Action 的对象属性中返回新状态。
export function AddComments(commentObject) {
return {
type: "Add",
object: commentObject
}
}
Reducers
Reducers 用于创建新的应用程序状态。
在下面的代码中，我们正在导入我们的接口 IAppState，因为它表示我们应用程序的状态。
在第二行，我们正在初始化应用程序的默认状态。默认情况下，我们将空状态分配给应用程序，因为我们将一个空对象 :[] 分配给空数组。
在第三行，您将看到一个函数，用于根据我们将要执行的 Action 类型来执行 Action。每个 Reducer 函数都将接受两个参数：state 和 action。到目前为止，我们只实现了 Add，但我们可以有 update、delete 等。我们在这里使用 switch，但您可以使用 if 或任何其他您喜欢的方式。Switch case 基于 action 类型，我们在这里使用 "Add" 的情况。
在 Add case 中，我们使用 object.assign 为应用程序创建新状态。object.assign 方法创建一个新状态，而不是覆盖现有状态。
import { IAppState } from "./IAppState";
const initialState: IAppState = {
object: []
};
export function UniformDataFlowReducer(state = initialState, action) {
switch (action.type) {
case "Add":
return AddNewObject(state, action);
}
}
function AddNewObject(state, action) {
return Object.assign({}, state, {
object: action.object
})
}
商店
这就是创建 Redux Store 的方法。要创建 Store，您必须需要 Reducer。我已经创建了一个 Reducer 来更新状态并在添加新评论到应用程序时发送新状态。Reducer 的名称是 UniformDataFlowReducer。我们创建了一个 IAppState 类型的 Store。这里，IAppState 是应用程序状态接口。
import {createStore} from "redux";
import {CommentsModel} from "../Model/Comment.Model";
import {UniformDataFlowReducer} from "./CommentsReducer.Redux";
import {IAppState} from "./IAppState";
export const commentStore = createStore<IAppState>(UniformDataFlowReducer);
Dispatch（派发）
Store 的 dispatch 方法用于在 Store 中更新或创建新状态。Store 的 dispatch 方法将仅由 Angular 组件触发。它将把新对象传递给 Store，该对象将充当应用程序的新状态。
在这里，commentStore 是 Redux Store，这段代码将在 Angular 组件的 add comment 方法中调用。我们将 Angular 表单数据传递给方法，它将在现有模型数组中添加新的 comment 模型对象。下面的代码中的模型数组存储在服务成员中，即 this.dataService.list。
在这里，AddComments 是我们上面已经讨论过的 Action。
commentStore.dispatch(AddComments(this.dataService.list));
GetState（获取状态）
所有依赖于 comment 模型数组的评论都将订阅 Redux Store 状态。因此，每当当前应用程序状态发生任何变化时，每个组件都会得知并相应地渲染结果。我们可以按如下方式获取状态：
this.dataService.list=commentStore.getState().object;
在这里，this.dataservice.list 是用于在 Angular 组件模板中显示结果的 comment 模型数组。我们调用 store.getState 并从 Store 中提取当前状态对象。
从我下面提到的 github 存储库下载 Angular CRUD 应用程序
尝试在上述应用程序中包含 Redux，将 localstorage 替换为 Redux Store。如果您对 Redux 库有任何疑问，请告知我。在图像中添加所示的 Redux Store Reducer 和 Actions。
希望您会喜欢这篇文章。:)