Quickly understand the NgRx/Store framework in Angular in one article

What is NgRx/Store framework in

Angular? What is the use? This article will take you to understand the NgRx/Store data state management framework, the basic principles in ngrx/store, and learn the simple usage of the framework through examples.

【Related tutorial recommendation: "angular tutorial"】

ngrx/store Yes A state management library based on RxJS, inspired by Redux. In NgRx, state is composed of a map containing functions of action and reducer. The Reducer function is called via the dispatch of action and the current or initial state, and finally an immutable state is returned by reducer.

State Management

State management of large and complex front-end Angular/AngularJS projects has always been a frustrating task Headache problem. In AngularJS (version 1.x), state management is usually handled by a mix of services, events, $rootScope. In Angular (version 2), component communication makes state management clearer, but it is still a bit complicated, and many methods are used depending on the data flow direction.

Basic principles in ngrx/store

The view layer initiates an action through dispatch, and Reducer receives it action, based on the action.type type, determines execution, changes the state, returns a new state to store, and is updated by store ##state.

##State
• (state) is the state (state) memory
Action
• (Behavior) Describes changes in state
Reducer
• (Reducer/Reduction function) Calculate the new state based on the previous state and current behavior. The method inside is pure The function state uses the observable object of
State
• and the observer of Action - Store to access

Actions (behavior)

Actions

is the carrier of information. It sends data to reducer, and then reducer updates store. Actions is the only way store can accept data. In

ngrx/store

, the interface of Action is as follows: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// actions包括行为类型和对应的数据载体 export interface Action { type: string; payload?: any; }</pre><div class="contentsignin">Copy after login</div></div>

type

Describes the expected status change type. For example, add to-do ADD_TODO, add DECREMENT, etc. payload is the data sent to store to be updated. storeThe code for dispatching action is similar to the following: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 派发action，从而更新store store.dispatch({ type: &amp;#39;ADD_TODO&amp;#39;, payload: &amp;#39;Buy milk&amp;#39; });</pre><div class="contentsignin">Copy after login</div></div>

Reducers

Reducers

Specifies the specific state changes corresponding to the behavior. It is a pure function that changes the state by receiving the previous state and dispatching behavior to return a new object as the next state. The new object is usually implemented using Object.assign and extended syntax. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// reducer定义了action被派发时state的具体改变方式 export const todoReducer = (state = [], action) =&gt; { switch(action.type) { case &amp;#39;ADD_TODO&amp;#39;: return [...state, action.payload]; default: return state; } }</pre><div class="contentsignin">Copy after login</div></div>When developing, special attention should be paid to the purity of the function. Because pure functions:

will not change the state outside its scope

• The output only depends on the input
• The same input will always get the same output

Store

store

stores all the immutable state in the application. The store in ngrx/store is the observable object of the RxJS state and the observer of the behavior. You can use

Store

to distribute actions. You can also use the Store's select() method to obtain observable objects, then subscribe to observe and react after the status changes. What we describe above is the basic process. In the actual development process, asynchronous operations such as API requests and browser storage will be involved, which requires

effects

and services. effects consists of actionTrigger, perform a series of logic and then issue one or more action that need to be added to the queue, and then processed by reducers.

Use the ngrx/store framework to develop applications, always maintain only one state, and reduce API calls.

Simple example

A brief introduction to the login module of a management system.

Create Form

1. Add components:

LoginComponent

, mainly layout, the code is component logic2. Define user:

User Model

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export class User { id: number; username: string; password: string; email: string; avatar: string; clear(): void { this.id = undefined; this.username = &quot;&quot;; this.password = &quot;&quot;; this.email = &quot;&quot;; this.avatar = &quot;./assets/default.jpg&quot;; } }</pre><div class="contentsignin">Copy after login</div></div><p>3、添加表单：在组件<code>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");
      })
  );

  完

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

  The above is the detailed content of Quickly understand the NgRx/Store framework in Angular in one article. For more information, please follow other related articles on the PHP Chinese website!