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+版本），组件通信让状态管理变得清晰一些，但还是有点复杂，根据数据流向不同会用到很多方法。
视图层通过dispatch发起一个行为（action）、Reducer接收action，根据action.type类型来判断执行、改变状态、返回一个新的状态给store、由store更新state。
State（状态） 是状态（state）存储器Action（行为） 描述状态的变化Reducer（归约器/归约函数） 根据先前状态以及当前行为来计算出新的状态，里面的方法为纯函数State的可观察对象，Action的观察者——Store来访问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规定了行为对应的具体状态变化。是纯函数，通过接收前一个状态和派发行为返回新对象作为下一个状态的方式来改变状态，新对象通常用Object.assign和扩展语法来实现。
// reducer定义了action被派发时state的具体改变方式
export const todoReducer = (state = [], action) => {
switch(action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}开发时特别要注意函数的纯性。因为纯函数：
store中储存了应用中所有的不可变状态。ngrx/store中的store是RxJS状态的可观察对象，以及行为的观察者。
可以利用Store来派发行为。也可以用Store的select()方法获取可观察对象，然后订阅观察，在状态变化之后做出反应。
上面我们描述的是基本流程。在实际开发过程中，会涉及API请求、浏览器存储等异步操作，就需要effects和services，effects由action触发，进行一些列逻辑后发出一个或者多个需要添加到队列的action，再由reducers处理。
使用ngrx/store框架开发应用，始终只维护一个状态，并减少对API的调用。
简单介绍一个管理系统的登录模块。
1、增加组件：LoginComponent，主要就是布局，代码为组件逻辑
2、定义用户：User Model
🎜Angular/AngularJS 프로젝트의 상태 관리는 항상 골치 아픈 문제였습니다. AngularJS(버전 1.x)에서 상태 관리는 일반적으로 서비스, 이벤트 및 $rootScope를 혼합하여 처리됩니다. Angular(버전 2+)에서는 컴포넌트 통신을 통해 상태 관리가 더욱 명확해지지만, 여전히 다소 복잡하고, 데이터 흐름 방향에 따라 다양한 방법이 사용됩니다. 🎜디스패치를 통해 작업(작업)을 시작합니다. Reducer는 action을 수신하고, 실행을 결정하고, 상태를 변경하고, action.type<을 기반으로 <code>store에 새 상태를 반환합니다. /code> 유형 >, state는 store에 의해 업데이트됩니다. 🎜🎜
🎜State(상태)는 상태(state) 메모리입니다.Action(동작)은 변경 사항을 설명합니다. 상태 Reducer(감소기/환원 함수)는 이전 상태와 현재 동작을 기반으로 새 상태를 계산합니다. 내부 메서드는 순수 함수입니다.State의 관찰 가능한 객체와 Action - StoreActions는 reducer로 데이터를 보내는 정보 전달자입니다. >reducer는 store를 업데이트합니다. 작업은 저장이 데이터를 허용할 수 있는 유일한 방법입니다. 🎜🎜ngrx/store에서 Action의 인터페이스는 다음과 같습니다. 🎜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";
}
}type은 예상되는 상태 변경 유형을 설명합니다. 예를 들어 할 일 ADD_TODO를 추가하고 DECREMENT 등을 추가합니다. 페이로드는 업데이트하기 위해 스토어로 전송되는 데이터입니다. action을 전달하기 위한 store의 코드는 다음과 유사합니다: 🎜export interface AuthState {
isAuthenticated: boolean;
user: User | null;
errorMessage: string | null;
}
export const initialAuthState: AuthState = {
isAuthenticated: false,
user: null,
errorMessage: null
};감소기는 동작에 해당하는 특정 상태 변경을 지정합니다. 이전 상태를 수신하고 새 객체를 다음 상태로 반환하는 동작을 전달하여 상태를 변경하는 순수 함수입니다. 🎜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) {}
}store는 애플리케이션의 모든 불변 상태를 저장합니다. ngrx/store의 store는 RxJS 상태의 관찰 가능한 객체이자 동작의 관찰자입니다. 🎜🎜Store를 사용하여 작업을 전달할 수 있습니다. 또한 Store의 select() 메서드를 사용하여 관찰 가능한 개체를 얻은 다음 구독하여 상태 변경 후 관찰하고 반응할 수 있습니다. 🎜🎜위에서 설명한 내용은 기본 프로세스입니다. 실제 개발 프로세스에는 API 요청 및 브라우저 저장과 같은 비동기 작업이 포함되며, 이를 위해서는 효과가 필요하며 서비스는 효과로 구성됩니다. code> 액션이 트리거되고 일련의 로직을 수행한 다음 대기열에 추가되어야 하는 하나 이상의 액션을 실행하고 리듀서에 의해 처리됩니다. 🎜🎜🎜🎜ngrx/store 프레임워크를 사용하여 애플리케이션을 개발하고 항상 하나의 상태만 유지하며 API 호출을 줄입니다. 🎜
LoginComponent, 주로 레이아웃, 코드는 구성 요소 로직입니다 🎜 🎜2. 사용자 정의: 사용자 모델🎜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表单
按照上述的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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
