NgRx Store 基础

本课将向您介绍 NgRx，这是一种功能强大的 Angular 应用状态管理解决方案。

什么是 NgRx？

NgRx 的设计受 Redux 启发，可帮助您在 Angular 应用中集中管理状态，从而简化组件之间的数据处理。

为什么使用 NgRx？

• 集中式状态管理
• 清晰且可预测的数据流
• 更容易进行调试和测试

核心概念

NgRx 涉及以下关键概念：

• Store：保存应用状态
• Actions：描述事件
• Reducers：处理状态转换
• Selectors：获取状态数据

安装 NgRx Store

使用 npm 安装 NgRx：

npm install @ngrx/store --save

创建 Store

在应用模块中定义 Store：

StoreModule.forRoot({ appState: appReducer })

创建 Actions

Actions 用于定义应用中的事件：

export const loadData = createAction('[App] Load Data');

Reducers

Reducers 通过响应 Actions 并生成新状态来处理状态变化：

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

总结

您已学会使用 NgRx Store 有效管理应用状态的基础知识。做得很好！