Angular는 상태 관리를 위해 ngrx/store를 사용합니다.

이 글에서는 Angular ngrx/store 상태 관리 사용법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "angular Tutorial"

Angular에서 상태 관리를 위해 ngrx 사용하기

소개

ngrx/store는 Redux와 통합된 각도 상태입니다. Angular 전도사 Rob Wormald가 개발한 RxJS용 관리 라이브러리입니다. 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 这个行为是绝对不允许的

ErNGRX/Store 사용 예시

1. @ngrx/store

yarn adD @ngrx/store

2

appstorestate.ts

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

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. store
루트 모듈 등록:

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. store

를 사용하여 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],

자세한 프로그래밍 관련 지식은 프로그래밍 배우기

를 방문해주세요! !

위 내용은 Angular는 상태 관리를 위해 ngrx/store를 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!