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

Cet article vous présentera l'utilisation de la gestion de l'état Angular ngrx/store. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations de didacticiel associées : "Tutoriel angulaire"

Utilisation de ngrx 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 Developed 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 streaming rxjs pour former @ngrx/store, un outil de gestion d'état pour Angular.

• StoreModule :
  StoreModule est un module de l'API @ngrx/store, qui est utilisé pour configurer les réducteurs dans les modules d'application.

• 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 à Les 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 magasin sous la forme d'un objet arbre.
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. Installez @ngrx/store

fil. ajoutez @ngrx/store

2. Créer un état, une action, un réducteur

état d'é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;
//     // 如果要管理多个状态,在这个接口中添加即可
//   }

reducer
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 la boutique

Module racine :
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. 🎜>

Injecter le magasin dans le composant ou le service à utiliser

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>

Le symbole pipe async est utilisé ici si vous l'utilisez directement dans le sous-module, une erreur sera signalée si vous souhaitez implémenter une liaison bidirectionnelle de données dans le sous-module. -module, une erreur sera également signalée. Pour les raisons spécifiques, veuillez vous référer au problème expliqué dans le didacticiel : Le canal '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 Et si vous souhaitez séparer l'action ?

Créez un nouveau fichier appstoreactions.ts

1. 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 }
   // }

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

2. import {CounterAction} from './store/actions';
   
   ... 
   
   providers: [CounterAction],

Utilisé dans les composants – article.component.ts

3. 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 :

Apprendre 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!