Quickly understand the NgRx/Store framework in Angular in one article-JS Tutorial-php.cn

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.

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

【Related tutorial recommendation: "angular tutorial"】

ngrx/storeYes A state management library based onRxJS, inspired byRedux. InNgRx, state is composed of a map containing functions ofactionandreducer. TheReducerfunction is called via the dispatch ofactionand the current or initial state, and finally an immutable state is returned byreducer.

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

State Management

State management of large and complex front-endAngular/AngularJSprojects 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 throughdispatch, andReducerreceives itaction, based on theaction.typetype, determines execution, changes the state, returns a new state tostore, and is updated bystore##state.

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

(state) is the state (state) memory
(Behavior) Describes changes in state
(Reducer/Reduction function) Calculate the new state based on the previous state and current behavior. The method inside is pure The functionstate uses the observable object of
and the observer ofAction-Storeto access

Actions (behavior)

Actions

is the carrier of information. It sends data toreducer, and thenreducerupdatesstore.Actionsis the only waystorecan accept data.In

ngrx/store

, the interface ofActionis as follows:

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

Copy after login

type

Describes the expected status change type. For example, add to-doADD_TODO, addDECREMENT, etc.payloadis the data sent tostoreto be updated.storeThe code for dispatchingactionis similar to the following:

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

Copy after login

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 usingObject.assignand extended syntax.

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

Copy after login

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. Thestoreinngrx/storeis the observable object of theRxJSstate and the observer of the behavior.You can use

Store

to distribute actions. You can also use the Store'sselect()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

andservices.effectsconsists ofactionTrigger, perform a series of logic and then issue one or moreactionthat need to be added to the queue, and then processed byreducers.

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

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

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"; } }

Copy after login

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 };
          
           Copy after login
          
         
        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) {} }
          
           Copy after login
          
         
        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 { const url = `${this.BASE_URL}/login`; return this.http.post(url, { email, pwd }); } }
          
           Copy after login
          
         
        effects侦听从Store调度的动作，执行某些逻辑，然后分派新动作
         
          一般情况下只在这里调用API
          通过返回一个action给reducer进行操作来改变store的状态
          effects总是返回一个或多个action（除非@Effect with {dispatch: false})）
         
       
       
       
        
         
          @Effect() Login: Observable = 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 = this.actions.pipe(ofType(AuthActionTypes.LoginFailure)); //成功的效果 @Effect({ dispatch: false }) LoginSuccess: Observable = this.actions.pipe( ofType(AuthActionTypes.LoginSuccess), tap(user => { localStorage.setItem("uid", user.payload.id); this.router.navigateByUrl("/sample"); }) );
          
           Copy after login
          
         
完
更多编程相关知识，请访问：编程视频！！
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!