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 :
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'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 这个行为是绝对不允许的
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 à utiliserPrenons 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('count')); // 从app.module.ts中获取count状态流 } increment() { this.store.dispatch({ type: INCREMENT }); } decrement() { this.store.dispatch({ type: DECREMENT }); } reset() { this.store.dispatch({ type: RESET }); } }
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>
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('count')); // 从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 ?
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 } // }
import {CounterAction} from './store/actions'; ... providers: [CounterAction],
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()); } }
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!