Redux Typescript 개념, 템플릿 감소

GithubRepo

간단한 소개
어이, 나는 새로 왔어, 나는 새로 왔어.나는 이전에 Angular에서 NgXS와 합작한 적이 있지만, 이것이 바로 주 관리층의 일이다.당신이 나의 방법에 대해 어떤 견해를 가지고 있는지, 내가 무엇을 주의해야 하는지 말해 주세요.) 물론 개선할 여지가 있습니다.

이 설정의 이점:
이 주를 덮을 새로운 동작이 필요합니까?
쉬웠어작업의 이름과 호출을 정의합니다.초과 지불은 위약으로 간주되고 모든 조작에 대해 집행되었다.그러니까 두 줄만.
작업은 덮어쓰지 않고 상태의 값에 추가됩니까?
이 동작을 완성하는 함수를 추가하여 지도에 추가합니다.
신주
이 상태의 이름을 추가하고 상태 모델을 정의하며 응용 프로그램 상태 모델에 상태를 추가합니다.
감속기
나는 네가 무슨 말을 하는지 모르겠다.

Redux 설정
이 설정은 템플릿 코드를 최대한 많이 삭제하도록 설계되었습니다.
redux 설정은 다음 구성 요소로 구성됩니다.

일반 작업(가능한 사용자 지정 작업)

주 합병(유효 하중 및 주 합병)

프레젠테이션

export interface State {
    readonly name: StateName;
}

export enum StateName {
    APP_STATE = 'appState',
    PRODUCT_LIST_STATE = 'productListState',
}

export interface AppStateModel extends State {
    [StateName.PRODUCT_LIST_STATE]: ProductListStateModel;
}

export const defaultAppState: AppStateModel = {
    name: StateName.APP_STATE,
    [StateName.PRODUCT_LIST_STATE]: defaultProductState,
};

export interface ProductListStateModel extends State {
    products: Array<ProductDTO>;
    loading: boolean;
    error: string;
}

주마다 이름이 하나씩 있다.이러한 이름은 하나의 열거에 저장된다.모든 상태는 응용 프로그램 상태의 일부분입니다.

행동

공통 작업 작성자
이 작성자는 src/state/utils에 저장됩니다.작업을 만들려면 다음 네 가지가 필요합니다.

상태모델

ActionType 열거

페이로드

상태 이름 또는 부울 값

StateModel 및 ActionType 열거는 어셈블리 디렉토리에 저장됩니다.

동작 생성기 사용
유효 하중은 유형 검사를 진행했다.그것은 주어진 상태 모델의 Partial<T> 인터페이스를 가지고 있다.일반 작성자에게는 별도의 작업 정의가 필요하지 않습니다.호출에서 변경된 속성을 정의합니다.
범용 창설자의 구조 함수는 두 개의 선택할 수 있는 매개 변수가 있다.stateName과 부울 값

UseCustomStateMergine(부울): 부울 값이true로 설정되면 개발자가 추가한 업무 논리를 저장하기 위한 사용자 정의 상태 통합을 불러옵니다.주 합병에 대한 더 많은 정보

stateName(stateName): UseCustomStateMerge 로고가false이거나 정의되지 않은 경우 기본 병합을 사용합니다.기본 합병은 유효 부하가 어느 상태에 적용되어야 하는지 알아야 합니다.

사용법

dispatch(new genericAction<ProductStateModel>(ProductListActionTypes.REQUEST_START, { loading: true }), StateName.PRODUCT_LIST_STATE, false);

사용자 정의 작업 만들기
생성된 작업이 제한에 도달하면 다음 템플릿을 사용하여 쓰기 작업을 추가할 수 있습니다.
사용법

export class SomeAction extends Action {
    public readonly type = SomeActionTypes.ActionName;
    public reducer = (state: AppStateModel) => ({ ...state, ...payload });

    constructor(public payload: Pick<SomeStateModel, 'someAttribute'>) {
        super();
    }
}

국가 합병
이거 뭐 하는 거예요?유효한 하중과 상태가 결합됩니다.

계약 위반 합병
genericaction 호출에 제공된 상태 이름에 따라 기본 상태 병합은 유효 부하를 정확한 상태에 적용합니다.이것은 가능한 것입니다. 왜냐하면 상태 이름은 응용 프로그램 상태 모델의 상태 속성 이름과 같기 때문입니다.

사용자정의 결합
생성된 작업은 Reducer를 포함하고 action 클래스에는 UseCustomStateMerge라는 로고가 있습니다.true라면, 이 동작의 Reduce 함수는 맵에서 상태 병합을 가져오고 병합 함수를 실행합니다.기본적으로 작업의 유효 부하 덮어쓰기 상태입니다.그러나 업무 논리가 더 필요할 수도 있기 때문에 맞춤형 합병이 필요하다.이러한 스토리지는 src/state/state-merger/에 있습니다.
새 주 통합을 만들려면 먼저 state-merger 파일에 새 클래스를 추가합니다.그것들은 이렇게 보인다.

export class ProductListRequestStartStateMerger extends DefaultStateMerger {
    merge(state: AppStateModel, payload: Partial<ProductListStateModel>): AppStateModel {
        return {
            ...state,
            productListState: {
                ...state.productListState,
                loading: payload.loading ? payload.loading : defaultProductListState.loading,
                error: 'State Merger working',
            },
        };
    }
}

이름 및 유형

명명 기본 규칙은 ActionNameStateMerge입니다.

이 클래스는 StateMerge 기본 클래스를 확장해야 합니다.

merge 함수를 실현하고 유형을 StateModel

으로 설정

유효 하중은 Partial<T>에 싸야 한다.

반환 유형은 AppStateModel이어야 합니다.

병합

애플리케이션의 상태 자체와 업데이트할 상태를 복제하여 "흔한 오류 #2: 단일 레벨의 얕은 복제만 복제"

를 방지합니다.
다음에 이 종류를 맵 state-merger-map 에 추가해야 합니다.

[ProductListActionTypes.REQUEST_START, new ProductListRequestStartStateMerger()]

각 엔트리는 ActionType 열거 및 state 병합 클래스의 새 인스턴스로 구성된 배열입니다.

감속기
모든 생성된 조작에는 유니버설 감속기가 있다.사용자 정의 작업도 처리할 수 있습니다.감속기의 논리는 '하청' 이기 때문에 원래의 감속기는 안감이다.

export const appStateReducer = (state: AppStateModel = defaultAppState, action: Action) => universalReducer(state, action);

출처

Idea to store reducers in Actions from @krawaller

Answers of Stack Overflow

Redux Docs

사진 작성자: Alena Aenami