在现代前端开发中，状态管理是一个不可或缺的部分，尤其是在构建大型应用时。Redux是一个流行的JavaScript库，用于管理应用的状态。本文将介绍如何在Angular应用中手动实现Redux，不依赖于如ng-redux2这样的外部库。假设已经熟悉Angular和TypeScript，因为本文将使用这两种技术。
Redux是一个开源的JavaScript库，用于管理应用状态。它提供了一种统一的方式来处理应用中的状态更新。在构建大型应用时，如果不使用Redux，状态管理可能会变得非常复杂。使用Redux可以帮助更有效地管理状态，确保状态的一致性和可预测性。
要在Angular应用中安装Redux，可以使用以下命令：
npm install redux --save
安装完成后，需要了解Redux的三个核心概念：Store、Reducers和Actions。
Store是Redux中用于存储和管理应用状态的对象。它是应用状态的单一真实来源。
Reducers是一个纯函数，它根据传入的action和当前的state计算出一个新的state。它不会直接修改state，而是返回一个新的state对象。
Actions是包含少量信息的普通JavaScript对象，它们是触发状态更新的唯一方式。可以把它们想象成消息，告诉store发生了哪些事情。
假设正在开发一个Angular应用，用于显示评论。可以使用以下URL访问示例数据：
https://jsonplaceholder.typicode.com/comments
可以从GitHub仓库获取Angular应用的代码。这是一个CRUD（创建、读取、更新、删除）应用。
在Angular应用中，定义了一个模型来表示评论：
class CommentsModel {
postId: number;
id: number;
name: string;
email: string;
body: string;
}
为了告诉Redux store将要存储哪种类型的应用状态，创建了一个接口。这个接口将用于创建Redux store。
import { CommentsModel } from "../Model/Comment.Model";
export interface IAppState {
object: CommentsModel[];
}
Actions可以由Angular组件触发，以更新状态。每个action都必须有一个type属性，该属性将被reducer用来理解它需要为哪个action创建新状态。以下是添加评论的action示例：
export function AddComments(commentObject) {
return {
type: "Add",
object: commentObject
};
}
Reducers用于创建新应用状态。以下是Reducers的示例代码：
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需要一个reducer。以下是创建store的示例代码：
import { createStore } from "redux";
import { CommentsModel } from "../Model/Comment.Model";
import { UniformDataFlowReducer } from "./CommentsReducer.Redux";
import { IAppState } from "./IAppState";
export const commentStore = createStore
Store的dispatch方法用于更新或创建store中的新状态。这个方法将由Angular组件触发。以下是dispatch方法的示例代码：
commentStore.dispatch(AddComments(this.dataService.list));
所有依赖于评论模型数组的组件都将订阅Redux store的状态。每当当前应用状态发生变化时，每个组件都会得到通知，并相应地渲染结果。以下是获取状态的示例代码：
this.dataService.list = commentStore.getState().object;