[Angular]forRootではなくprovideStoreでState(NGXS)を初期化する in スタンドアロンコンポーネント

はじめに

個人開発でAngularのスタンドアロンコンポーネントを使用しており、state(NGXS)の初期化方法がNgModuleを介して使用する時と変わっていたので記録しておきます!

環境

• Angular CLI: 17.3.8
• @ngxs/store@^18.0.0
• Node: 20.11.0

stateの初期化方法

NgModule

// app.module.ts
@NgModule({
  imports: [
    NgxsModule.forRoot([HeroState]),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

スタンドアロンコンポーネント

// app.config.ts
import { provideStore } from '@ngxs/store';
export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideStore([HeroState]),
  ]
}

summary

HttpClientModuleとかもprovideHttpClient()で代用することになっていたので、最初につまづけて良かったです💦
以下の記事がとても参考になりました。
https://blog.lacolaco.net/posts/angular-provider-function-pattern/

余談

NGXSのインストールガイドにprovideStoreについて記載がありましたが、完全に読み飛ばしていて、詰まってしまいました。

最初に以下のようなコードでapiにリクエストできているのか確認したのですが...

this.store.dispatch(new GetRaceList()).subscribe({
  next: () => console.log('終了'),
  error: (err) => console.error(err),
})

dispatchしているのにリクエストが飛ばない...「終了」が表示される❓❓
初期化されていないActionが呼ばれたら教えてくれてもいいんだよ？😤