NgRx v8 入门(一)---@ngrx/store

最新推荐文章于 2024-07-19 09:49:20 发布

liutongj

最新推荐文章于 2024-07-19 09:49:20 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/liutongj/article/details/92696305

版权

本文介绍了NgRx v8的基础使用，包括软件版本、@ngrx/store的安装、创建项目以及运行效果展示。文章详细讲解了如何新建组件、定义state接口、创建action和reducer，同时应用了metaReducer进行日志记录。

摘要由CSDN通过智能技术生成

1.软件版本

    1. Angular 8.0.2
    2. Angular CLI  8.0.4
    3. NgRx 8.0.1 
    4. TypeScript 3.4.5
    5. Node.js 10.16.0 
    6. NPM 6.9.0

2.安装

安装@ngrx/store

    npm install @ngrx/store --save

3.建立项目

项目结构
1.新建article组件，在app.component中引用：

<app-article></app-article>

article组件中用三个按钮切换不同状态：

<button (click)="showJavaArticles()">Java Articles</button>
<button (click)="showAngularArticles()">Angular Articles</button>
<button (click)="showFavoriteArticles()">Favorite Articles</button>
<ul>
   <li *ngFor="let article of articles | async">
        {
  {article.id}} - {
  {article.title}} - {
  {article.category}}   
   </li>
</ul>

按钮对应不同的action点击事件：

@Component({
   
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})
export class ArticleComponent implements OnInit {
   


  articles: Observable<Article[]>

  constructor(private store: Store<ArticleState>) {
   
    this.articles = store.select(articleReducer.getArticles);
  }

  ngOnInit(): void {
   
  }

  showJavaArticles