SignalStoreの作成
signalStoreとwithStateで状態を定義します
「SignalStoreの作成」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
SignalStore とは
NgRx SignalStore は、Angular signals を基盤とした軽量な状態管理ソリューションです。withState、withComputed、withMethods などの features を組み合わせてストアを構成します。
インストール
SignalStore は @ngrx/signals パッケージに含まれています。Angular プロジェクトに追加し、必要な構成要素をインポートします。
// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';signalStore ファクトリ
signalStore() はインジェクション可能なクラスを返します。状態と動作を記述する feature を渡します。デフォルトでは root で提供されます。
export const CounterStore = signalStore(
{ providedIn: 'root' },
withState({ count: 0 })
);withState
withState(initial) は初期状態を定義します。トップレベルの各プロパティはストア上のシグナルになるため、store.count は store.count() として呼び出すシグナルです。
withState({
count: 0,
user: null as User | null,
items: [] as Item[]
});ストアのインジェクション
ファクトリはインジェクション可能なクラスを返すため、通常のサービスと同じようにインジェクションし、テンプレートで状態シグナルを読み取れます。
@Component({
template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
store = inject(CounterStore);
}patchState
patchState ヘルパーで SignalStore の状態を更新します。ストアと部分的な状態オブジェクトまたは更新関数を受け取り、不変的に適用します。
import { patchState } from '@ngrx/signals';
patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));シグナルとしての状態スライス
すべての状態キーは個別のシグナルとして公開されます。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 を省略してコンポーネントスコープのストアを作成し、コンポーネントの providers にストアを追加します。これにより、各コンポーネントインスタンスが独立した状態を持てます。
@Component({
providers: [CounterStore]
})
export class WidgetComponent {
store = inject(CounterStore);
}Feature の構成
SignalStore の強みは構成可能性です。複数の feature を並べると、1つのストアに統合されます。後の feature は前の feature を読み取れるため、順序が重要です。
export const TodoStore = signalStore(
withState({ todos: [] as Todo[] })
// withComputed(...), withMethods(...) added next
);ボイラープレート不要
従来の Redux スタイルの NgRx（actions、reducers、effects、selectors）とは異なり、SignalStore では状態とロジックを1つの宣言的なストアにまとめられるため、ボイラープレートが大幅に減ります。
理解度チェック
SignalStore の基本を確認しましょう。
まとめ
signalStore() と withState で SignalStore を作成し、状態スライスをシグナルとして読み取り、patchState で不変的に更新しました。また、ルート提供とコンポーネントスコープのストアを使い分けました。次は computed と methods です。
よくある質問
「SignalStoreの作成」レッスンは無料ですか？
はい。「SignalStoreの作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「SignalStoreの作成」で何を学びますか？
signalStoreとwithStateで状態を定義します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「SignalStoreの作成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- SignalStoreの作成
- Computedとメソッド
- 非同期処理のためのrxMethod
- エンティティとカスタム機能