angular의 반응 상태 관리 - NgRx 스토리지, 작동, 선택기

NgRx 프레임워크는 반응 각도 응용 프로그램을 구축하는 데 도움이 된다.

기본 개념NgRx store 각도 응용 프로그램에 반응 상태 관리를 제공한다.NgRx store는 각도 응용을 위해 개발한 redux 구현으로 RxJS 관찰 가능한 API를 제공한다.state는 변하지 않는 데이터 구조로 전체 응용 프로그램의 유일한 진리 원천이다.NgRx Actions는 응용 프로그램에서 상태 변환을 실행하거나 부작용을 일으키는 데 사용할 수 있는 유일한 이벤트를 나타낸다.NgRx Reducers는 Actions에 반응하여 상태 전환을 실행하는 순수 함수이다.NgRx Selectors는 선택, 파생 또는 상태 세션을 구성하는 순수 함수이다.NgRx Effects 부작용 격리를 허용한다.

선결 조건-

당신은 각도 틀에 대해 합리적인 이해를 가지고 있습니다.

당신은 레드ux 구조에 대해 기본적으로 알고 있습니다.

당신은 RxJs 관찰할 수 있는 API와 각종 조작원에 대해 상당히 잘 알고 있습니다.

카탈로그

설치

프레젠테이션

설계 국가

초기화 상태

NgRx 행동

NgRx 감속기

createReducer 함수

ActionReducerMap 만들기

등록 시

NgRx 선택기

선택기

createSelector 함수

문자열 선택기.

장치
만약 네가 이미angular 응용 프로그램이 있다면, 너는 바로 4단계로 들어갈 수 있다

# 1) install angular cli
npm install -g @angular/cli

# 2) create a demo app
ng new ngrx-angular-demo

# 3) navigate to demo app
cd ngrx-angular-demo

# 4) install ngrx store
ng add @ngrx/store@latest

# 5) run angular in dev mode
ng serve

먼저 파일 구조의 예를 살펴보겠습니다.이러한 구조는 응용 프로그램NgRx의 상태 관리 기능을 분리하는 데 도움이 될 것이다.나는 보통 모든 기능 모듈에서 같은 구조를 복제한다.

    ──store
        |_ app.actions.ts
        |_ app.effects.ts
        |_ app.reducer.ts
        |_ app.selectors.ts

app.actions.ts 파일에는 NgRX actions

app.effects.ts 파일에는 NgRx effects가 포함됩니다.

app.reducer.ts 파일에는 State 설계 및 초기화가 포함됩니다.그것은 또한 감속기 기능을 포함할 것이다.

app.selectors.ts에는 NgRx selectors가 포함됩니다.

이것은 완전무결하다project setup.

프레젠테이션
상태 응용 프로그램 상태를 포함하는 불변 객체를 나타냅니다.읽기 전용이므로 각 상태 변환은 기존 상태를 수정하는 대신 새 상태로 돌아갑니다.응용 프로그램이 증가함에 따라 모든 기능은 하나의 단독 상태를 포함해야 한다. 이것은 전역 응용 프로그램 상태의 일부분이다.따라서 응용 프로그램 상태는 하나 이상의 기능 상태를 포함한다.
상태는 Javascript 객체와 유사합니다.이것은 key-value 쌍의 형식으로 특징 상태를 포함하는데 그 중에서 key는 특징 상태를 나타내고 value는 특징 상태의 대상을 나타낸다.
기능 모듈과 관련된 상태를 feature state라고 한다.

interface State{
    feature_1: FeatureOneState,
    feature_2: FeatureTwoState,
    feature_3: FeatureThreeState
}

설계 국가
가령 우리angular 응용 프로그램에 많은 기능 모듈이 있다고 가정하면그 중 하나의 기능 모듈은 사용자의 설정 파일을 책임진다.profile 모듈은 users와 관련posts의 목록을 보여주는 것을 책임진다.
상태를 설계하기 위해서 프로필 모듈에 필요한 상태는 사용자 목록과 게시물 목록을 포함해야 한다고 가정할 수 있습니다.
구성 파일 상태를 ProfileFeatureState라고 합니다.

/** User modal */
export interface User {

  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

/ **post modal** /
export interface Post {
  id: number;
  userId: number;
  title: string;
  body: string;
}

/ **the modals should ideally be in their own ts file** /

export interface ProfileFeatureState {
  users: User[];
  posts: Post[];
}

우리는 User와 Post에 유형을 정의했고 ProfileFeatureState에 인터페이스를 만들었다.
마지막으로 응용 프로그램 루트 상태ProfileFeatureState에 AppState를 추가합니다.profile 키는 profileFeatureState를 나타냅니다.

interface AppState{    
    profile: UserFeatureState,    
//..other features here
}

초기화 상태
처음에 응용 프로그램의 상태는 데이터가 없기 때문에 null였다.이에 따라 users array와 posts array 모두 null로 초기화된다.

export const initialProfileFeatureState: ProfileFeatureState = {
  users: null,
  addresses: null
};

이때 app.reducer.ts 파일은 다음과 같아야 한다-

/*app.reducer.ts*/

/** User modal */
export interface User {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

/** Post Modal */

export interface Post {
  id: number;
  userId: number;
  title: string;
  body: string;
}

export interface ProfileFeatureState {
  users: User[];
  addresses: Address[];
}

export const initialProfileFeatureState: ProfileFeatureState = {
  users: null,
  addresses: null
};

export interface AppState {
  profile: ProfileFeatureState;
}

행동:
NgRx 작업은 애플리케이션의 이벤트를 나타냅니다.그것들은 상태 전환이나 트리거NgRx Effect 서비스의 부작용을 촉발할 수 있다.

interface Action{
    type:string
    //optional metadata properties
}

Action 인터페이스는 Type라는 속성을 포함한다.Type 속성 표지 조작.작업에는 옵션metadata도 포함될 수 있습니다.createAction 함수는 생성 작업에 사용되며 ActionCreator 함수를 되돌려줍니다.ActionCreator 함수가 호출될 때 TypedAction 형식의 조작을 되돌려줍니다.또는 props 함수를 사용하여 추가 메타데이터를 제공할 수도 있습니다.
사용자를 ProfileFeatureState 에 추가하는 작업을 계속 만듭니다.

export const addUsers = createAction(
 '[profile] add users',
 props<{ users: User[] }>()
);

addUsers 작업의 유형은 [profile] add users입니다.[profile]는 행동의 근원을 대표한다.이 도구들은 사용자 그룹을 메타데이터로 포함한다.
이와 같이 기능 상태에 게시물을 추가하는 작업을 만들 수 있습니다.

//file: app.actions.ts

export const addPosts = createAction(
  '[profile] add posts',
  props<{ posts: Post[] }>()
);

addUsers 사용자를 상태에 추가해야 한다는 것을 표시하기 위해 스케줄링 작업을 한다.그것은 또한 user[]를 메타데이터로 포함할 것이다.
이와 유사하게 POST와 관련된 작업도 할당됩니다.

Actions represent the events and not the commands or operations. A single command or operation may generate many types of Actions. For example, An operation that creates a new user would at least generate Actions for success and failure such as [profile] user created or [profile] user creation failed.

NgRx 감속기 -
복원기는 pure functions 최신 스케줄링 작업에 따라 한 상태에서 다른 상태로 전환합니다.reducer 함수는 기존 상태를 수정하지 않고 모든 상태 변환에 새로운 상태를 되돌려줍니다.따라서 모든 Reducer 함수는 변할 수 없는 조작을 실행합니다.

CreateReducer
NgRx는 감속기를 만들기 위한 createReducer 기능을 제공합니다.그것은 initialState를 첫 번째 매개 변수로 하고 any 함수를 첫 번째 매개 변수로 한다.on 함수는 조작과 상태 변경 간의 관련을 제공합니다.
하나의 동작이 스케줄링될 때, 모든 복원 프로그램이 이 동작을 받을 것이다.on 함수 매핑은 감속기가 이 조작을 처리해야 하는지 확인합니다.on 함수 반환ActionReducer 함수.ActionReducer 함수는 Action와 State를 입력으로 하고 새로운 계산 상태를 되돌려줍니다.
처리 createReducer 변환을 위한 감속기를 계속 만듭니다.

import * as AppActions from './app.actions';

const theProfFeatureReducer = createReducer(
  initialProfileFeatureState,
  on(AppActions.addUsers, (state, { users }) => ({
    ...state,
    users: [...users]
  })),
  on(AppActions.addPosts, (state, { posts }) => ({
    ...state,
    posts: [...posts]
  })),

);

ProfileFeatureState 함수는 많은 조작을 비추고 createReducer 함수를 되돌려줍니다.ActionReducer 작업이 함수에 비추어 새 addUsers 그룹을 만들고 새 계산 상태를 되돌려줍니다.이와 유사하게User 동작도 비쳤다.

The […] spread operator copies the properties of the object and returns a new object. It only performs the shallow copying and does not copy the nested structures. You should always consider a better alternative if you are dealing with a state that contains nested data structures. Libraries like lodash provide methods to clone nested structures.

ActionReducerMap 만들기addPosts는 ActionReducerMap의 형식으로 비추는데 그 중에서 key-value는 문자열의 형식으로 특징명을 나타내고key는 value 함수가 되돌아오는 ActionReducer function이다.
우리의 예에서 createReducer는 ActionReducerMap를 키로 하고 profile는 value로 한다.

/**The profileFeatureReducer function is necessary as function calls are not supported in the View Engine AOT compiler. It is no longer required if you use the default Ivy AOT compiler (or JIT)**/

function profileFeatureReducer
(state: ProfileFeatureState = initialState, action: Action) {
  return theProfFeatureReducer(state, action);
}

/ **AppActionReducer Map** /
export const AppActionReducerMap: ActionReducerMap<AppState> = {
  profile: profileFeatureReducer
  // ... other feature go here

};

생성하지 않아도 됩니다theProfFeatureReducer.응용 프로그램에 감속기를 등록할 때 ActionReducerMap 에서 직접 맵을 제공할 수 있습니다.모듈ts. 기능 모듈에 기능 상태를 따로 등록할 수도 있습니다.나는 Typescript에서 더 좋은 유형 검사를 제공하기 때문에 단독으로 만드는 것을 더 좋아한다.
이 때 Dell의 StoreModule.forRoot({key: ActionReducer}) 파일은 다음과 같아야 합니다.

/ **app.reducer.ts** /
export interface ProfileFeatureState {
  users: User[];
  posts: Post[];
}

export const initialProfileFeatureState: ProfileFeatureState = {
  users: null,
  posts: null
};

export interface AppState {
  profile: ProfileFeatureState;
}

const theProfFeatureReducer = createReducer(
  initialProfileFeatureState,
  on(AppActions.addUsers, (state, { users }) => ({
    ...state,
    users: [...users]
  })),
  on(AppActions.addPosts, (state, { posts }) => ({
    ...state,
    posts: [...posts]
  }))
);

function profileFeatureReducer(state: ProfileFeatureState = initialProfileFeatureState, action: Action) {
  return theProfFeatureReducer(state, action);
}

export const AppActionReducerMap: ActionReducerMap<AppState> = {
  profile: profileFeatureReducer
};

등록 국가
감속기를 만든 후 모듈에 등록해야 합니다.다음 두 가지 옵션 중 하나를 사용하여 상태를 등록할 수 있습니다.
레지스터 루트 상태
애플리케이션에 글로벌 스토리지 등록

StoreModule.forRoot({ AppActionReducerMap })

ActionReducerMap는 app.reducer.ts를 매개 변수로 한다.매핑에는 StoreModule.forRoot() 함수 반환ActionReducerMap과 key 대상이 포함됩니다.
각 기능 상태 등록 -
기능 상태는 루트 상태와 유사하지만 프로그램의 특정 기능 상태를 나타낸다.일반적으로 모든 기능은 자신의 모듈에 등록해야 한다.

StoreModule.forFeature({ profile: profileFeatureReducer })

벌써 이렇게 멀리 갔으면NgRx 선택기에 대해서도 알고 싶을 수 있습니다.

NgRx 선택기 생성 방법

선택기 - 단일 또는 여러 개의 상태 필름을 조합하려면createSelector 함수를 어떻게 사용합니까

프로젝터 기능을 사용하여 상태 슬라이스의 일부만 반환하는 방법

상태 세그먼트를 선택할 때 NgRx 선택기가 사용됩니다.그것에 대한 상세한 댓글이 있습니다 here