@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
'programing' 카테고리의 다른 글
'+' 연산자를 사용하여 Oracle에서 FULL OUTER JOIN을 수행하는 방법은 무엇입니까? (0) | 2023.06.27 |
---|---|
문자열 형식의 %s과 %d의 차이점은 무엇입니까? (0) | 2023.06.27 |
함수 및 Firestore 사용 시 필드 값이 정의되지 않음 (0) | 2023.06.27 |
클래스와 모듈의 차이 (0) | 2023.06.27 |
PL/SQL: 세션 변수를 선언하려면 어떻게 해야 합니까? (0) | 2023.06.27 |