refactor: component と usecase が参照する store を DeprecatedArticleStore から…

… ArticleStore に変更

src/app/features/blog/applications/article.usecase.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { DeprecatedArticleStore } from '../containers/articles/article.store';
+import { ArticleStore } from '../containers/articles/article.store';
 import { ArticleUsecase } from './article.usecase';
 
 describe('ArticleUsecase', () => {
@@ -9,7 +9,7 @@ describe('ArticleUsecase', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
-      providers: [ArticleUsecase, DeprecatedArticleStore],
+      providers: [ArticleUsecase, ArticleStore],
       teardown: { destroyAfterEach: false },
     });
     usecase = TestBed.inject(ArticleUsecase);

src/app/features/blog/applications/article.usecase.ts

@@ -1,22 +1,20 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import XMLParser from 'xml2js';
-import { DeprecatedArticleStore } from '../containers/articles/article.store';
+import { ArticleStore } from '../containers/articles/article.store';
 import { FeedValueObject, RssFeed } from '../domain/feed';
 import { FeedGateway } from '../infrastructures/gateways/feed.gateway';
 
 @Injectable()
 export class ArticleUsecase {
-  constructor(
-    private readonly componentStore: DeprecatedArticleStore,
-    private readonly feedGateway: FeedGateway,
-  ) {}
+  private readonly store = inject(ArticleStore);
+  private readonly feedGateway = inject(FeedGateway);
 
   async fetchFeed() {
     const rssFeed = await firstValueFrom(this.feedGateway.getRssResponse());
     const parsed: RssFeed = await XMLParser.parseStringPromise(rssFeed);
     const feedValueObject = FeedValueObject.createFromRssResponse(parsed);
 
-    this.componentStore.setFeed(feedValueObject.plainObject());
+    this.store.setFeed(feedValueObject.plainObject());
   }
 }

src/app/features/blog/containers/articles/articles.component.html

@@ -2,7 +2,7 @@
 
 <p>はてなブログに投稿された最新の 30 件を表示</p>
 
-@if (articles$ | async; as articles) {
+@if (articles(); as articles) {
   <div class="feed-wrapper">
     @for (article of articles; track article) {
       <app-article [feedItem]="article"></app-article>

src/app/features/blog/containers/articles/articles.component.ts

@@ -1,25 +1,24 @@
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { PageTitleComponent } from '../../../../shared/page-title/page-title/page-title.component';
 import { ArticleUsecase } from '../../applications/article.usecase';
 import { ArticleComponent } from '../../ui/article/article.component';
-import { DeprecatedArticleStore } from './article.store';
+import { ArticleStore } from './article.store';
 
 @Component({
   selector: 'app-articles',
   templateUrl: './articles.component.html',
   styleUrls: ['./articles.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DeprecatedArticleStore, ArticleUsecase],
+  providers: [ArticleStore, ArticleUsecase],
   standalone: true,
-  imports: [PageTitleComponent, NgIf, NgFor, ArticleComponent, AsyncPipe],
+  imports: [PageTitleComponent, NgIf, NgFor, ArticleComponent],
 })
 export class ArticlesComponent implements OnInit {
-  constructor(
-    private readonly _componentStore: DeprecatedArticleStore,
-    private _usecase: ArticleUsecase,
-  ) {}
-  articles$ = this._componentStore.blogItems$;
+  private readonly store = inject(ArticleStore);
+  private readonly _usecase = inject(ArticleUsecase);
+
+  articles = this.store.items;
 
   ngOnInit(): void {
     this._usecase.fetchFeed();