@ngrx/Store를 업그레이드할 때 '작업' 유형에 'payload' 속성이 없습니다.

@ngrx/Store를 업그레이드할 때 '작업' 유형에 'payload' 속성이 없습니다.

나는 가지고 있습니다.@ngrx/store각진(4.x) 앱으로 패키지를 만들고 v2.2.2 -> v4.0.0에서 업그레이드 중입니다.마이그레이션 노트에 다음과 같은 내용이 표시됩니다.

작업 인터페이스에서 페이로드 속성이 제거되었습니다.

하지만, 그들이 제시한 예는 완전히 반직관적으로 보입니다(제가 보기에는...).

다음과 같은 리듀서 기능이 있습니다.

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: Action): ITitle {
    switch (action.type) {
        case 'SET_TITLE':
            return {
                company: action.payload.company,
                site: action.payload.site,
                department: action.payload.department,
                line: action.payload.line
            }
        case 'RESET':
            return {
                company: 'MyCo',
                site: 'London'
            }
        default:
            return state
    }
}

예상했던 대로 이제 유형 스크립트 오류가 발생합니다.

[ts] 'payload' 속성이 'Action' 유형에 없습니다.

하지만 저는 마이그레이션 가이드에서 이것도 무엇을 변경해야 하는지 전혀 모르겠습니다.아이디어 있어요?

다음과 같은 작업 유형을 생성할 수 있습니다.payload정의된 예제 앱에서 참조할 수 있습니다.

class AddBookAction implements Action {
    readonly type = ADD_BOOK;

    constructor(public payload: Book) {}
}

그런 다음 감속기에서 해당 유형을 사용합니다.

function reducer(state = initialState, action: AddBookAction): State

작업은 다음과 같이 발송될 수 있습니다.

this.store.dispatch(new AddBookAction(book));

또한 예제 앱은 축소자가 단일 연합 유형으로 취할 수 있는 모든 작업 유형을 결합합니다.

export type Actions =
    | AddBookAction
    | AddBookSuccessAction

export function reducer(state = initialState, action: Actions): State

네, 아주 흥미로운 주제입니다.저는 새로운 Realese(4.0)를 놓쳤지만, 제 레포의 라이브러리를 업데이트했고 저도 같은 문제가 있다는 것을 알았습니다.

맞아요.새 릴리스의 작업에서 페이로드 특성이 삭제되었습니다.효과를 사용하여 작업을 발송하는 경우, 솔루션은 간단하며 마이그레이션 노트에서 이를 읽을 수 있습니까?

그러나 페이로드를 전달하기 위해 디스패치를 수행하려면 다음과 같은 방법으로 매개 변수화된 작업을 생성할 수 있습니다.

export interface ActionWithPayload<T> extends Action {
  payload: T;
} 

따라서 이 인터페이스를 추가한 경우 다음과 같은 방법으로 감속기를 변경할 수 있습니다.

export class SomeObject {
    company: string;
    site: string;
    department: string;
    line: string;
}

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: ActionWithPayload<SomeObject>): ITitle {
    switch (action.type) {
        case 'SET_TITLE':
            return {
                company: action.payload.company,
                site: action.payload.site,
                department: action.payload.department,
                line: action.payload.line
            }
            ...

제가 찾은 최고의 산책 코스입니다.저는 이 변화의 이유를 더 잘 이해해야 하며, 더 나은 솔루션을 찾으려면 여기에 추가했습니다.

변경 부탁드립니다.app.module.ts

imports: [
    StoreModule.forRoot({ appTutorial: TutorReducer } as ActionReducerMap<any,any>),
]

오류를 제거할 수 있습니다.

저는 또한 이 접근법이 도움이 된다는 것을 알았습니다: 원본을 가져오는 것.Action와의 인터페이스as절을 하고 그것을 a로 확장합니다.payload소유물.

이 경우 코드의 나머지 부분인 https://blog.dmbcllc.com/upgrade-ngrx-4-x/ 을 변경할 필요가 없습니다.

같은 오류 메시지가 표시되었지만 다른 원인이 있습니다.

내 건설업자에게 다음과 같은 것이 있었습니다.

.addCase(setFlight.type, (state, action) => {
  state.flight = action.payload
});

다음과 같은 동작으로:

const setFlight = createAction<Flight>('flight/set');

그리고 항상 "payload가 유형 작업에 존재하지 않습니다"라는 오류가 발생했습니다. 제가 했어야 할 일은 제거하는 것이었습니다.type의 제1인자로.addCase()따라서 감속기는 다음과 같이 되어야 합니다.

.addCase(setFlight, (state, action) => {
  state.flight = action.payload
});

이제더더.payload드롭다운으로 사용할 수 있으며 오류는 사라집니다.

언급URL : https://stackoverflow.com/questions/45412448/property-payload-does-not-exist-on-type-action-when-upgrading-ngrx-store