한 기사로 Angular의 NgRx/Store 프레임워크를 빠르게 이해하세요.

Angular의 NgRx/Store 프레임워크는 무엇인가요? 무슨 소용이 있나요? 이 기사에서는 NgRx/Store 데이터 상태 관리 프레임워크, ngrx/store의 기본 원칙을 안내하고 예제를 통해 프레임워크의 간단한 사용법을 알아봅니다.

【관련 튜토리얼 추천: "angular tutorial"】

ngrx/store는 RxJS를 기반으로 한 상태 관리 라이브러리입니다. 리덕스. NgRx에서 상태는 action과 reducer를 포함하는 함수 맵으로 구성됩니다. Reducer 함수는 action의 전달과 현재 또는 초기 상태를 통해 호출되며, 마지막으로 reducer에 의해 불변 상태가 반환됩니다. ngrx/store 是基于RxJS的状态管理库，其灵感来源于Redux。在NgRx中，状态是由一个包含action和reducer的函数的映射组成的。Reducer函数经由action的分发以及当前或初始的状态而被调用，最后由reducer返回一个不可变的状态。

状态管理

在前端大型复杂Angular/AngularJS项目的状态管理一直是个让人头疼的问题。在AngularJS（1.x版本）中，状态管理通常由服务，事件，$rootScope混合处理。在Angular中（2+版本），组件通信让状态管理变得清晰一些，但还是有点复杂，根据数据流向不同会用到很多方法。

ngrx/store中的基本原则

视图层通过dispatch发起一个行为（action）、Reducer接收action，根据action.type类型来判断执行、改变状态、返回一个新的状态给store、由store更新state。

• State（状态） 是状态（state）存储器
• Action（行为） 描述状态的变化
• Reducer（归约器/归约函数） 根据先前状态以及当前行为来计算出新的状态，里面的方法为纯函数
• 状态用State的可观察对象，Action的观察者——Store来访问

Actions（行为）

Actions是信息的载体，它发送数据到reducer，然后reducer更新store。Actions是store能接受数据的唯一方式。

在ngrx/store里，Action的接口是这样的：

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

type描述期待的状态变化类型。比如，添加待办 ADD_TODO，增加 DECREMENT 等。payload是发送到待更新store中的数据。store派发action 的代码类似如下：

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

Reducers（归约器）

Reducers规定了行为对应的具体状态变化。是纯函数，通过接收前一个状态和派发行为返回新对象作为下一个状态的方式来改变状态，新对象通常用Object.assign和扩展语法来实现。

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

开发时特别要注意函数的纯性。因为纯函数：

• 不会改变它作用域外的状态
• 输出只决定于输入
• 相同输入，总是得到相同输出

Store（存储)

store中储存了应用中所有的不可变状态。ngrx/store中的store是RxJS状态的可观察对象，以及行为的观察者。

可以利用Store来派发行为。也可以用Store的select()方法获取可观察对象，然后订阅观察，在状态变化之后做出反应。

上面我们描述的是基本流程。在实际开发过程中，会涉及API请求、浏览器存储等异步操作，就需要effects和services，effects由action触发，进行一些列逻辑后发出一个或者多个需要添加到队列的action，再由reducers处理。

使用ngrx/store框架开发应用，始终只维护一个状态，并减少对API的调用。

简单示例

简单介绍一个管理系统的登录模块。

创建Form表单

1、增加组件：LoginComponent，主要就是布局，代码为组件逻辑

2、定义用户：User Model

상태 관리

ngrx/store의 기본 원칙

• State(상태)는 상태(state) 메모리입니다.
• Action(동작)은 변경 사항을 설명합니다. 상태
• Reducer(감소기/환원 함수)는 이전 상태와 현재 동작을 기반으로 새 상태를 계산합니다. 내부 메서드는 순수 함수입니다.
• 상태는 State의 관찰 가능한 객체와 Action - Store

Actions

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

export interface AuthState {
    isAuthenticated: boolean;
    user: User | null;
    errorMessage: string | null;
}

export const initialAuthState: AuthState = {
    isAuthenticated: false,
    user: null,
    errorMessage: null
};

Reducers< /h4>🎜감소기는 동작에 해당하는 특정 상태 변경을 지정합니다. 이전 상태를 수신하고 새 객체를 다음 상태로 반환하는 동작을 전달하여 상태를 변경하는 순수 함수입니다. 🎜

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) {}
}

로그인 후 복사

로그인 후 복사

🎜개발 시 함수의 순수성에 특히 주의하세요. 순수 함수이기 때문에: 🎜

• 범위 외부의 상태를 변경하지 않습니다.
• 출력은 입력에만 의존합니다.
• 동일한 입력은 항상 동일한 출력을 얻습니다.
• li>

Store

🎜ngrx/store 프레임워크를 사용하여 애플리케이션을 개발하고 항상 하나의 상태만 유지하며 API 호출을 줄입니다. 🎜

간단한 예

양식 만들기

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

  로그인 후 복사

  完

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

  위 내용은 한 기사로 Angular의 NgRx/Store 프레임워크를 빠르게 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!