Comprenez rapidement le framework NgRx/Store dans Angular en un seul article

Qu'est-ce que le framework NgRx/Store dans Angular ? A quoi ça sert ? Cet article vous amènera à comprendre le cadre de gestion de l'état des données NgRx/Store, les principes de base de ngrx/store et à apprendre l'utilisation simple du cadre à travers des exemples.

[Recommandation de tutoriel associée : "tutoriel angulaire"]

ngrx/store est basé sur le statut de RxJS Bibliothèque de gestion, inspirée de Redux. En NgRx, l'état est composé d'une carte contenant les fonctions de action et reducer. La fonction Reducer est appelée via le dispatch de action et l'état actuel ou initial, et enfin un état immuable est renvoyé par reducer.

Gestion du statut

La gestion du statut des projets front-end vastes et complexes Angular/AngularJS a toujours été un casse-tête. Dans AngularJS (version 1.x), la gestion de l'état est généralement gérée par un mélange de services, d'événements, $rootScope. Dans Angular (version 2+), la communication entre composants rend la gestion des états plus claire, mais elle reste encore un peu compliquée et de nombreuses méthodes sont utilisées en fonction du sens du flux de données.

Principes de base dans ngrx/store

La couche de vue initie une action via dispatch, et Reducerreçoit action, selon action.type Type pour déterminer l'exécution, modifier le statut, renvoyer un nouveau statut à store et mettre à jour store par state.

• State (état) est l'état (state) la mémoire
• Action (comportement) décrit le changement d'état
• Reducer (fonction de réduction/réduction) Calculez le nouvel état en fonction de l'état précédent et du comportement actuel. La méthode à l'intérieur est une pure fonction
• l'état utilise un objet observable de State. , l'observateur de Action - Store pour accéder aux

Actions (comportement)

Actions est porteur d'informations, il envoie des données vers reducer, puis reducermettre à jourstore. Actions est le seul moyen pour store d'accepter des données.

Dans ngrx/store, l'interface de Action est la suivante :

// actions包括行为类型和对应的数据载体
export interface Action {
  type: string;
  payload?: any;
}

type décrit le type de changement d'état attendu. Par exemple, ajoutez une tâche ADD_TODO, ajoutez DECREMENT, etc. payload sont les données envoyées à store pour être mises à jour. storeLe code de dispatching action est similaire au suivant :

// 派发action，从而更新store
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Buy milk'
});

Réducteurs (réducteurs)

Reducers précise les changements d'état spécifiques correspondant au comportement. Il s'agit d'une fonction pure qui change l'état en recevant l'état précédent et en répartissant le comportement pour renvoyer un nouvel objet comme état suivant. Les nouveaux objets sont généralement implémentés en utilisant Object.assign et une syntaxe étendue.

// reducer定义了action被派发时state的具体改变方式
export const todoReducer = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

Portez une attention particulière à la pureté des fonctions lors du développement. Parce que les fonctions pures :

• ne changeront pas l'état en dehors de leur portée
• La sortie ne dépend que de l'entrée
• La même entrée obtiendra toujours la même sortie

Store (stockage)

store stocke tout l'état immuable dans l'application. Le ngrx/store dans store est l'objet observable de l'état RxJS et l'observateur du comportement.

peut être utilisé pour distribuer des actions à l'aide de Store. Vous pouvez également utiliser la méthode select() du Store pour obtenir des objets observables, puis vous abonner pour observer et réagir après les changements de statut.

Ce que nous décrivons ci-dessus est le processus de base. Dans le processus de développement réel, des opérations asynchrones telles que les requêtes API et le stockage du navigateur seront impliquées, ce qui nécessite effects et services est déclenché par effects après avoir exécuté une série de logiques. doivent être ajoutés à Le action de la file d'attente est ensuite traité par action. reducers

Utilisez le framework ngrx/store pour développer des applications, en maintenant toujours un seul état et en réduisant les appels d'API.

Exemple simple

Une brève introduction au module de connexion d'un système de gestion.

Créer un formulaire

1. Ajouter des composants :

, principalement la mise en page, le code est la logique des composants LoginComponent

2. Définir les utilisateurs : < 🎜. >

export class User {
    id: number;
    username: string;
    password: string;
    email: string;
    avatar: string;

    clear(): void {
        this.id = undefined;
        this.username = "";
        this.password = "";
        this.email = "";
        this.avatar = "./assets/default.jpg";
    }
}

3、添加表单：在组件LoginComponent增加Form表单

NGRX Store

按照上述的4个原则定义相应的Actions

• reducers定义状态

  在文件auth.reducers.ts中创建状态，并初始化

  export interface AuthState {
      isAuthenticated: boolean;
      user: User | null;
      errorMessage: string | null;
  }
  
  export const initialAuthState: AuthState = {
      isAuthenticated: false,
      user: null,
      errorMessage: null
  };

• actions定义行为

  export enum AuthActionTypes {
      Login = "[Auth] Login",
      LoginSuccess = "[Auth] Login Success",
      LoginFailure = "[Auth] Login Failure"
  }
  
  export class Login implements Action {
      readonly type = AuthActionTypes.Login;
      constructor(public payload: any) {}
  }

• service实现数据交互（服务器）

  @Injectable()
  export class AuthService {
      private BASE_URL = "api/user";
  
      constructor(private http: HttpClient) {}
  
      getToken(): string {
          return localStorage.getItem("token");
      }
  
      login(email: string, pwd: string): Observable<any> {
          const url = `${this.BASE_URL}/login`;
          return this.http.post<User>(url, { email, pwd });
      }
  }

• effects侦听从Store调度的动作，执行某些逻辑，然后分派新动作

  • 一般情况下只在这里调用API

  • 通过返回一个action给reducer进行操作来改变store的状态

  • effects总是返回一个或多个action（除非@Effect with {dispatch: false})）

• @Effect()
  Login: Observable<any> = this.actions.pipe(
      ofType(AuthActionTypes.Login),   //执行Login响应
      map((action: Login) => action.payload),
      switchMap(payload => {
          return this.authService.login(payload.email, payload.password).pipe(
              map(user => {
                  return new LoginSuccess({ uid: user.id, email: payload.email });
              }),
              catchError(error => {
                  return of(new LoginFailure(error));
              })
          );
      })
  );
  
  //失败的效果
  @Effect({ dispatch: false })
  LoginFailure: Observable<any> = this.actions.pipe(ofType(AuthActionTypes.LoginFailure));
  
  //成功的效果
  @Effect({ dispatch: false })
  LoginSuccess: Observable<any> = this.actions.pipe(
      ofType(AuthActionTypes.LoginSuccess),
      tap(user => {
          localStorage.setItem("uid", user.payload.id);
          this.router.navigateByUrl("/sample");
      })
  );

  完

  更多编程相关知识，请访问：编程视频！！

  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!