Angular Academy · 课时

创建 SignalStore

Q: 「创建 SignalStore」这节课中我会学到什么？

使用 signalStore 和 withState 定义状态 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 signalStore 和 withState 定义状态

创建 SignalStore 是 CoddyKit 上的免费 Angular Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

什么是 SignalStore

NgRx SignalStore 是一种基于 Angular signals 构建的轻量级状态管理方案。您可以通过 features 组合 store，例如 withState、withComputed 和 withMethods。

安装

SignalStore 位于 @ngrx/signals 包中。请将其添加到 Angular 项目，然后导入所需的构建模块。

// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';

signalStore 工厂

signalStore() 会返回一个可注入的类。请传入用于描述状态和行为的 features。默认情况下，该 store 会在根级别提供。

export const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 })
);

withState

withState(initial) 定义初始状态。每个顶层属性都会成为 store 上的一个信号，因此 store.count 是一个需要通过 store.count() 调用的信号。

withState({
  count: 0,
  user: null as User | null,
  items: [] as Item[]
});

注入 store

由于该工厂返回的是可注入的类，您可以像注入任何服务一样注入它，并在模板中读取其状态信号。

@Component({
  template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

patchState

使用 patchState 辅助函数更新 SignalStore 状态。它接受 store 以及部分状态对象或更新函数，并以不可变方式应用更新。

import { patchState } from '@ngrx/signals';

patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));

作为信号的状态切片

每个状态键都会作为独立信号公开。读取一个切片不会与其他切片产生耦合，模板也只会因其读取的切片发生更新。

// given withState({ count: 0, name: '' })
store.count();  // number signal
store.name();   // string signal

为状态指定类型

请为可为 null 的字段或数组字段显式指定状态类型，以便 SignalStore 推断出正确的信号类型。在初始对象中使用 as 类型断言。

type State = { user: User | null; loading: boolean };

withState<State>({ user: null, loading: false });

局部提供与根级提供

省略 providedIn 可创建组件作用域的 store；请将该 store 添加到组件的 providers 中。这样每个组件实例都会拥有独立隔离的状态。

@Component({
  providers: [CounterStore]
})
export class WidgetComponent {
  store = inject(CounterStore);
}

组合 Features

SignalStore 的强大之处在于组合：列出多个 features，它们就会合并到一个 store 中。顺序很重要，因为后面的 features 可以读取前面的 features。

export const TodoStore = signalStore(
  withState({ todos: [] as Todo[] })
  // withComputed(...), withMethods(...) added next
);

无需样板代码

与经典 Redux 风格的 NgRx（actions、reducers、effects、selectors）不同，SignalStore 会将状态和逻辑集中在一个声明式 store 中，大幅减少样板代码。

快速检查

检查您对 SignalStore 基础知识的掌握程度。

回顾

您使用 signalStore() 和 withState 创建了 SignalStore，将状态切片作为信号读取，通过 patchState 以不可变方式更新状态，并在根级提供的 store 与组件作用域的 store 之间进行选择。接下来将学习 computed 和 methods。

常见问题解答

「创建 SignalStore」课时是免费的吗？

是的 — 「创建 SignalStore」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「创建 SignalStore」这节课中我会学到什么？

使用 signalStore 和 withState 定义状态你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「创建 SignalStore」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy