在Angular之store浅学(一)中已经对store的相关概念和用法进行了比较全面的浅析,在本篇博文中我们将着重学习Store中的selector。
在文章正式开始前,让我们先借鉴一下Angular 17+NGRX 状态管理大佬的分析图进行简单的 复习及预习:
Store概念复习:
-
基本概念
- Store: 是一个集中式的状态容器,它保存了应用程序的状态,并允许组件通过dispatch 方法发送操作(actions)来更改状态。
- Actions: 是表示应用程序事件的对象,通常用于描述将要发生的事情。例如:{type: 'ADD_TODO', payload: {text:'Learn NgRx'}}。
- Reducers: 是纯函数,定义了如何根据不同的 action 更新 state。
- Selectors: 是纯函数,用于从 Store 中选择和派生特定的数据片段。
-
设置 Store