Utilisation de ngrx/store pour la gestion de l'état dans Angular

Introduction

ngrx/store s'inspire de Redux et est une bibliothèque de gestion d'état angulaire intégrée à RxJS, développée par l'évangéliste angulaire Rob Wormald. Il a la même idée de base que Redux, mais utilise RxJS pour implémenter le modèle d'observateur. Il suit les principes fondamentaux de Redux mais est conçu spécifiquement pour Angular.

La plupart de la gestion de l'état dans Angular peut être prise en charge par le service. Dans certains projets de taille moyenne et grande, les inconvénients de cela seront révélés. L'un d'eux est que le flux d'état est chaotique, ce qui n'est pas propice. à une maintenance ultérieure. Plus tard, il s'appuie sur le modèle de gestion d'état de redux et le combine avec les caractéristiques de la programmation de flux rxjs pour former @ngrx/store, un outil de gestion d'état pour Angular

Recommandé en relation. tutoriels : " tutoriel angulaire》

• StoreModule :
  StoreModule est un module de l'API @ngrx/store, qui est utilisé pour configurer le réducteur dans le module de candidature.

• Action :
  L'action est un changement d'état. Il décrit l'occurrence d'un événement, mais ne précise pas comment l'état de l'application change.

• Store :
  Il fournit Store.select() et Store.dispatch() pour travailler avec le réducteur. Store.select() est utilisé pour sélectionner un sélecteur,
  Store.dispatch(
  {
  type:'add',
  payload:{name:'111'}
  }
  )
  Le type utilisé pour envoyer des actions aux réducteurs.

Trois principes de gestion de l'état de @NgRx/Store

Tout d'abord, @NgRx/Store adhère également aux trois principes de base de Redux :

• Source de données unique

Ce principe est que l'état de l'ensemble de l'application monopage est stocké dans le store sous la forme d'une arborescence d'objets.
Cette définition est très abstraite. En fait, il s'agit de stocker toutes les données qui doivent être partagées sous forme d'objets javascript

state ={
    application:'angular app',
    shoppingList:['apple', 'pear']
}

• l'état est en lecture seule (l'état ne peut être sous forme de lecture seule)

L'une des principales fonctionnalités de ngrx/store est que les utilisateurs ne peuvent pas modifier directement le contenu du statut. Par exemple, si nous devons enregistrer l'état de la page de connexion, les informations d'état doivent enregistrer le nom de l'utilisateur connecté. Lorsque le nom de connexion change, nous ne pouvons pas modifier directement le nom d'utilisateur enregistré dans l'état

state={'username':'kat'},
//用户重新登录别的账户为tom
state.username = 'tom'  //在ngrx store 这个行为是绝对不允许的

• les modifications sont effectuées avec des fonctions pures (l'état ne peut être modifié qu'en appelant des fonctions)

En raison de L'état ne peut pas être modifié directement. ngrx/store introduit également un concept appelé réducteur (agrégateur). Modifiez l'état via le réducteur.

function reducer(state = 'SHOW_ALL', action) {
    switch (action.type) {
      	case 'SET_VISIBILITY_FILTER':
        	return Object.assign({}, state  ,newObj);  
        default:
        	return state  
        }
	}

exemple d'utilisation de ngrx/store

1. Installer @ngrx/store

yarn add @ngrx/store

2. réducteur

état état :
appstorestate.ts

//下面是使用接口的情况， 更规范
export interface TaskList {
  id: number;
  text: string;
  complete: boolean;
}

export const TASKSAll: TaskList[] = [
  {id: 1, text: 'Java Article 1', complete: false},
  {id: 2, text: 'Java Article 2', complete: false}
]

export interface AppState {
  count: number;
  todos: TaskList;
  // 如果要管理多个状态,在这个接口中添加即可
}

//这个是不用接口的情况
// export interface AppState {
//     count: number;
//     todos: any;
//     // 如果要管理多个状态,在这个接口中添加即可
//   }

réducteur
appstorereducer.ts

// reducer.ts,一般需要将state,action,reducer进行文件拆分
import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

const initialState = 0;
// reducer定义了action被派发时state的具体改变方式
export function counterReducer(state: number = initialState, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    case DECREMENT:
      return state - 1;

    case RESET:
      return 0;

    default:
      return state;
  }
}

actions

Si vous devez extraire l'action séparément, veuillez vous référer à ce qui suit
5 Que faire si vous souhaitez séparer l'action ?

3. Enregistrez le module racine du magasin

 :
app/app.module.ts

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
// StoreModule: StoreModule是@ngrx/storeAPI中的一个模块，
// 它被用来在应用模块中配置reducer。

import {counterReducer} from './store/reducer';

@NgModule({
  imports: [
  	StoreModule.forRoot({ count: counterReducer }), // 注册store
  ],
})
export class AppModule {}

4. Utilisez le magasin

dans un composant ou service Injecter dans le magasin pour utilisation

Prenons le composant appmodulearticlearticle.component.ts comme exemple :

// 组件级别
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { INCREMENT, DECREMENT, RESET} from '../../store/reducer';

interface AppState {
  count: number;
}

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})
export class ArticleComponent  {
  count: Observable<number>;

  constructor(private store: Store<AppState>) { // 注入store
    this.count = store.pipe(select(&#39;count&#39;)); 
    // 从app.module.ts中获取count状态流
  }

  increment() {
    this.store.dispatch({ type: INCREMENT });
  }

  decrement() {
    this.store.dispatch({ type: DECREMENT });
  }

  reset() {
    this.store.dispatch({ type: RESET });
  }
}

Page modèle :
appmodulearticlearticle.component.html

<div class="state-count">

    <button (click)="increment()">增加Increment</button>
    <div>Current Count: {{ count | async }}</div>
    <button (click)="decrement()">减少Decrement</button>

    <button (click)="reset()">Reset Counter</button>
</div>

Pipeline est utilisé ici Symbole asynchrone, utilisez le rapport d'erreur rapide directement dans le sous-module. Si vous souhaitez implémenter la liaison bidirectionnelle des données dans le sous-module, une erreur sera également signalée. Pour les raisons spécifiques, veuillez vous référer à. la question expliquée dans le didacticiel : Le tube 'async' est introuvable ?

Comment rendre la page sans utiliser de tuyaux dans la page modèle ?

Modifier comme suit :

count: Observable<number>;

constructor(private store: Store<AppState>) { // 注入store
    var stream = store.pipe(select(&#39;count&#39;)); 
    // 从app.module.ts中获取count状态流
    stream.subscribe((res)=>{
          this.count = res;
      })
  }

Pour la commodité de la gestion, le type, l'état, les actions, les réducteurs sont généralement gérés séparément

5 Si Comment séparer les actions ?

1. Créez un nouveau fichier appstoreactions.ts

import { Injectable } from '@angular/core';
import { INCREMENT, DECREMENT, RESET } from './types';

@Injectable()
export class CounterAction{
    // Add=function(){}
    Add(){
        return { type: INCREMENT }
    }
}

// 就只这样导出是不行的
// export function Add1(){
//     return { type: INCREMENT }
// }

2. Inscrivez-vous dans le module racine app.module.ts

import {CounterAction} from './store/actions';

... 

providers: [CounterAction],

3. Utilisé dans les composants – article.component.ts

import {CounterAction} from '../../store/actions';

export class ArticleComponent implements OnInit {

  constructor(
    private action: CounterAction  //注入CounterAction
    ) { }

    increment() {
    // this.store.dispatch({ type: INCREMENT }); 
    //把 actions分离出去
    this.store.dispatch(this.action.Add()); 
    
  }
}

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!