Angular에서 상태 관리를 위해 ngrx를 사용하는 방법에 대한 간략한 설명

관련 권장 사항: "angular Tutorial"

ngrx/store은 Redux에서 영감을 받아 RxJS를 통합하고 Angular 전도사 Rob Wormald가 개발한 Angular 상태 관리 라이브러리입니다. Redux와 핵심 아이디어는 동일하지만 RxJS를 사용하여 관찰자 패턴을 구현합니다. 핵심 Redux 원칙을 따르지만 Angular를 위해 특별히 설계되었습니다.

Angular의 대부분의 상태 관리는 서비스로 인계될 수 있습니다. 일부 중대형 프로젝트에서는 이에 대한 단점이 드러납니다. 그 중 하나는 상태 흐름이 혼란스러워 향후 유지 관리에 도움이 되지 않는다는 것입니다. 나중에 Redux는 rxjs 스트리밍 프로그래밍의 특성과 결합된 상태 관리 모델로 Angular의 상태 관리 도구인 @ngrx/store를 사용했습니다.

• StoreModule은 @ngrx/store에 있는 모듈입니다. 애플리케이션 모듈에서 감속기를 구성하는 데 사용되는 API입니다.
  

• 액션:

  액션은 상태의 변화입니다. 이벤트 발생을 설명하지만 애플리케이션의 상태가 어떻게 변경되는지는 지정하지 않습니다.
  

• Store:

  리듀서 작업을 위해 Store.select() 및 Store.dispatch()를 제공합니다. Store.select()는 선택기를 선택하는 데 사용되며,
  Store.dispatch(
  {
  type: 'add',
  payload: {name: '111'}
  }
  )
  은 작업 유형을 배포하는 데 사용됩니다. 감속기에.
  

@NgRx/Store 상태 관리의 세 가지 원칙

우선 @NgRx/Store는 Redux의 세 가지 기본 원칙도 준수합니다.

단일 데이터 소스

이 원칙은 전체에 적용됩니다. 단일 페이지 애플리케이션 상태는 객체 트리 형태로 저장소에 저장됩니다.

이 정의는 사실 공유해야 하는 모든 데이터를 자바스크립트 객체 형태로 저장하는 것입니다. 상태 내용은 직접 수정할 수 없습니다. 예를 들어 로그인 페이지의 상태를 저장해야 하는 경우 상태 정보에는 로그인한 사용자의 이름이 기록되어야 합니다. 로그인 이름이 변경되면 상태에 저장된 사용자 이름을 직접 수정할 수 없습니다

state =
{
    application:'angular app',
    shoppingList:['apple', 'pear']
}

변경은 순수 함수로 이루어집니다(상태는 함수를 호출해야만 변경할 수 있습니다)

상태를 직접 변경할 수 없으므로 ngrx /store는 또한 Reducer(Aggregator)라는 개념을 도입했습니다. 리듀서를 통해 상태를 수정합니다.

state={'username':'kat'},
//用户重新登录别的账户为tom
state.username = 'tom'  //在ngrx store 这个行为是绝对不允许的

ngrx/store 사용 예

1. @ngrx/store

function reducer(state = 'SHOW_ALL', action) {
    switch (action.type) {
      	case 'SET_VISIBILITY_FILTER':
        	return Object.assign({}, state  ,newObj);  
        default:
        	return state  
        }
	}

2를 설치합니다. 상태, 액션, 리듀서

상태를 생성합니다.

appstorestate.ts

yarn add @ngrx/store

Reducer appstorereducer.ts

//下面是使用接口的情况， 更规范
export interface TaskList {
  id: number;
  text: string;
  complete: boolean;
}

export const TASKSAll: TaskList[] = [
  {id: 1, text: 'Java Article 1', complete: false},
  {id: 2, text: 'Java Article 2', complete: false}
]

export interface AppState {
  count: number;
  todos: TaskList;
  // 如果要管理多个状态,在这个接口中添加即可
}

//这个是不用接口的情况
// export interface AppState {
//     count: number;
//     todos: any;
//     // 如果要管理多个状态,在这个接口中添加即可
//   }

actions

액션을 별도로 추출해야 하는 경우에는 다음을 참고하세요
5. 액션을 분리하고 싶다면 어떻게 해야 하나요?

3. 스토어 등록

루트 모듈:
app/app.module.ts

// reducer.ts,一般需要将state,action,reducer进行文件拆分
import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

const initialState = 0;
// reducer定义了action被派发时state的具体改变方式
export function counterReducer(state: number = initialState, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    case DECREMENT:
      return state - 1;

    case RESET:
      return 0;

    default:
      return state;
  }
}

4. 스토어 사용

스토어를 사용하기 위해 컴포넌트 또는 서비스에 삽입

appmodulearticlearticle.comComponent.ts 컴포넌트 예:

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
// StoreModule: StoreModule是@ngrx/storeAPI中的一个模块，
// 它被用来在应用模块中配置reducer。

import {counterReducer} from './store/reducer';

@NgModule({
  imports: [
  	StoreModule.forRoot({ count: counterReducer }), // 注册store
  ],
})
export class AppModule {}

템플릿 페이지: appmodulearticlearticle.comComponent.html

// 组件级别
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { INCREMENT, DECREMENT, RESET} from '../../store/reducer';

interface AppState {
  count: number;
}

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})
export class ArticleComponent  {
  count: Observable<number>;

  constructor(private store: Store<AppState>) { // 注入store
    this.count = store.pipe(select(&#39;count&#39;)); 
    // 从app.module.ts中获取count状态流
  }

  increment() {
    this.store.dispatch({ type: INCREMENT });
  }

  decrement() {
    this.store.dispatch({ type: DECREMENT });
  }

  reset() {
    this.store.dispatch({ type: RESET });
  }
}

여기서는 파이프 기호 비동기가 사용되며 데이터의 양방향 바인딩이 구현되는 경우 오류가 하위 모듈에 직접 보고됩니다. 하위 모듈에서도 오류가 보고됩니다. 특히 이유는 코스웨어에 설명된 질문과 관련이 있습니다. '비동기' 파이프를 찾을 수 없습니까?

템플릿 페이지에서 파이프를 사용하지 않고 페이지를 렌더링하는 방법은 무엇입니까?

다음과 같이 수정합니다.

<div class="state-count">

    <button (click)="increment()">增加Increment</button>
    <div>Current Count: {{ count | async }}</div>
    <button (click)="decrement()">减少Decrement</button>

    <button (click)="reset()">Reset Counter</button>
</div>

관리의 편의를 위해 타입, 상태, 액션, 리듀서를 별도로 관리하는 것이 일반적입니다

5 액션을 분리하고 싶다면?

새 appstoreactions.ts 파일 만들기

count: Observable<number>;

constructor(private store: Store<AppState>) { // 注入store
    var stream = store.pipe(select(&#39;count&#39;)); 
    // 从app.module.ts中获取count状态流
    stream.subscribe((res)=>{
          this.count = res;
      })
  }

루트 모듈 app.module.ts에 등록

import { Injectable } from '@angular/core';
import { INCREMENT, DECREMENT, RESET } from './types';

@Injectable()
export class CounterAction{
    // Add=function(){}
    Add(){
        return { type: INCREMENT }
    }
}

// 就只这样导出是不行的
// export function Add1(){
//     return { type: INCREMENT }
// }

컴포넌트에서 사용 – ​​article.comComponent.ts

import {CounterAction} from './store/actions';

... 

providers: [CounterAction],

2. 자세한 프로그래밍 관련 지식은
프로그래밍 영상을 방문해주세요! !

위 내용은 Angular에서 상태 관리를 위해 ngrx를 사용하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!