NgRX 효과 - '관찰 가능' 유형 을 '관찰 가능' 할당 할 수 없습니다 .
NgRX 8과 함께 작업하는 동안 동료들과 저는 효과를 구현할 때 종종 이상한 오류 메시지에 직면합니다.
'관찰 가능한 <알 수 없음>' 유형은 '관찰 가능한 <액션> | (...인수: any[] => 관찰 가능한 <액션>)' 유형에 할당할 수 없습니다.
유형 문제와 관련이 있습니다.메시지가 너무 구체적이지 않고 완전한 효과를 나타내는 것은 정말 짜증나는 일입니다.이 문제는 자주 발생하며 해결하기가 매우 어렵습니다.
우리는 문제를 빨리 파악하기 위해 우리가 할 수 있는 일이 있는지, 아니면 어떤 방식으로든 메시지를 파괴할 수 있는지 궁금합니다.저는 여기서 구체적인 해결책을 찾고 있는 것이 아니라 "잘못된 부분을 신속하게 판단하는 방법"인 절차를 찾고 있습니다.
감사합니다!
가능성의 집합
그것은 우리가 지금까지 해온 것이고 또한 댓글과 답변에서 나온 아이디어입니다.
- 대부분의 경우 조치에는 문제가 없을 수 있습니다.
- 그것은 잘못된 파괴가 될 수 있습니다.
switchMap - RxJS 연산자 중 하나를 가져오지 않았습니다.
- 서비스의 잘못된 매개 변수 및 반환 값이 원인일 수 있습니다.
- 서비스 및 작업의 유형이 일관되지 않은 것도 원인일 수 있습니다.
- 아무 도움도 되지 않고 확실하다면, 잘못된 것은 없습니다: TypeScript 다시 로드
우리는 여전히 오류 메시지를 해결하기 위한 트릭을 바라고 있습니다.
version
을 말하다createEffect(() =>,
IDE(V 코드)가 플래그 지정하는 오류를 수정합니다.
더하다createEffect(() => 로뒤
대안 - 다음과 같이 다시 쓰는 것도 효과가 있습니다.
someEffect$ = createEffect(() => {
return this.actions$.pipe(
...
)
})
추가의
위의 작업을 수행한 후에도 오류가 발생합니까?유형 검사는 올바른 작업을 수행하고 사용자가 다음에 매핑해야 한다는 것을 알려줍니다.Observable<Action>또는 두 번째 인수를 추가하는 순수한 부작용의 경우.{ dispatch: false }(즉, 조치를 발송하지 않음).NgRx 효과 문서 참조
이전 답변(사용)@Effect불필요하며 필수가 아닙니다.)
중 가장 쉬운 로 작성하는 것입니다.@Effect장식가 및 일단 사용하여 다시 쓰기가 완료되면createEffect.
디버깅하기:
navigateToDashboard$ = createEffect(() =>
this.actions$.pipe(
ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
map((team: Team) => team.TeamID),
SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
)
)
이는 다음과 같이 쓰기를 허용합니다(데코레이터 추가, 삭제).createEffect(() =>bracket ), 종브래킷삭제최),삭,
@Effect()
navigateToDashboard$ = this.actions$.pipe(
ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
map((team: Team) => team.TeamID),
SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
)
이제 오류가 발생합니다.
Cannot find name 'SwitchMap'
뒤에
Type 'Go' is not assignable to type 'ObservableInput<any>'
이것을 고치는 것은 주는 것.
@Effect()
navigateToDashboard$ = this.actions$.pipe(
ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
map((team: Team) => team.TeamID),
switchMap(id => of(new routerActions.Go({ path: ['/team', id, 'populate'] })))
)
이제 NgRx 8항으로 다시 작성합니다.예쁘지는 않지만 효과가 있습니다.
저도 똑같은 문제가 있었는데, 제 경우는 교정기가 잘못 설치되어 있고 수입품이 누락되어 있었습니다.
여기 제가 디버깅하고 해결하기 위해 한 일이 있습니다.
내부 파이프 가능 기능을 개별 기능으로 분할합니다.vscode의 복잡한 구문과 자동 완성 중괄호 때문에 이것은 저에게 있어 가장 중요한 단계입니다. 때때로 대괄호가 잘못된 위치에 있어서 찾기가 쉽지 않습니다.이것은 디버깅할 코드가 훨씬 작고 vsode가 하위 함수에서 이 개별 오류를 강조하기 때문에 거의 모든 다른 문제(가져오기 누락, 잘못된 반환 유형 등)도 해결합니다.
이것은 내가 전에 먹었던 것입니다.
performLogin$ = createEffect(() =>
this.actions$.pipe(
ofType(performLogin),
mergeMap(() => this.loginService.performLogin().pipe(
map(() => loginSuccess())
)))
);
아래로 변경됨
performLogin$ = createEffect(() =>
this.actions$.pipe(
ofType(performLogin),
mergeMap(() => this.performLogin()),
catchError((error ) => { console.log("HELLO"); return EMPTY})
)
);
performLogin() {
return this.loginService.performLogin()
.pipe(map(() => loginSuccess()));
}
또한 이 접근 방식에서 얻은 보너스는 내부 파이프의 catchError 블록이 트리거되지 않는다는 것입니다(효과 예제에 따라 작동해야 함).따라서 외부 파이프 가능 블록에 포함시켜야 했습니다.여기서 오류가 발견되고 예상대로 작동합니다.하지만 여전히 그것이 작동하지 않는 이유를 알아내고 있습니다.
요약하자면 로그인 서비스는 다음 작업을 수행합니다(오류 발생 또는 관찰 가능한 true 반환).
//login.service.ts
performLogin() : Observable<boolean> {
throw "Something went wrong";
//return of(true);
}
이게 도움이 되길 바랍니다.
이 문제를 처리하고 공식 ngrx 8 예제를 사용하는 경우.
loadMovies$ = createEffect(() => this.actions$.pipe(
ofType('[Movies Page] Load Movies'),
mergeMap(() => this.moviesService.getAll()
.pipe(
map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
catchError(() => EMPTY)
))
)
);
쉽고 빠른 솔루션은 "모든" 유형을 입력하는 것일 수 있습니다.
loadMovies$: any = createEffect((): any => this.actions$.pipe(
ofType('[Movies Page] Load Movies'),
mergeMap(() => this.moviesService.getAll()
.pipe(
map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
catchError(() => EMPTY)
))
)
);
rxjs 연산자, 관측 가능한 항목에 대한 가져오기를 잊지 마십시오.
작업 페이로드 - 프롭을 처리하는 경우 작업 유형을 정의합니다.
ofType<MySuperActions>
또는
ofType<ReturnType<typeof myAction>>
내가 그것을 고친 것은 추가하는 것이었습니다.Observable<Action>전달된 함수의 반환 유형으로createEffect예:
addComment$ = createEffect((): Observable<Action> =>
this.actions$.pipe(
...
),
);
실제로 당신은 다음에 의해 생성된 동작을 처리해야 합니다.createAction함수로 호출하여 작업 개체를 반환합니다.이 설명을 확인하십시오.그래서 너의of(addCommentFailed)그래야 한다of(addCommentFailed()).
여기서 가져오기 'of' 연산자가 누락되어 이 문제가 발생했습니다.
// events.effects.ts
...
getEvents$: Observable<Action> = createEffect(
() => this.actions$.pipe(
ofType(EventsActions.getEvents),
switchMap(action =>
this.eventService.getEvents().pipe(
map(events => EventsActions.getEventsSuccess({ events })),
catchError(error => of(EventsActions.getEventsError({ error })))
)
)
)
);
...
맨 위에 이 코드 줄을 추가하여 수정했습니다.
// events.effects.ts
import { Observable, of } from 'rxjs';
...
저의 경우, 저는 rxjs 연산자 중 하나 안에 lodash 연산자를 사용했습니다.알고 보니, 전 그런 적이 없었어요.@types/lodash.끝나고npm i -D @types/lodash내 문제는 해결되었습니다.
오늘 비슷한 문제가 발생했습니다(같은 오류 메시지). TypeScript가 의 반환 유형을 정확하게 추론하지 못했기 때문입니다. , 또는 명시적으로 입력되지 않은 배열도 동일할 것으로 예상됩니다.
다음은 충돌한 코드입니다.
this.actions$.pipe(
ofType(ActionType),
switchMap((action) => {
return action.cart.flatMap((cartItem: CartItem) => {
if (x) {
return [
ActionCreator1(params1),
ActionCreator2(params2)
];
} else {
return [];
}
}
})
)
그래서 나는 같은 오류 메시지를 받았습니다:
'관찰 가능한 <알 수 없음>' 유형은 '관찰 가능한 <액션> | (...인수: any[] => 관찰 가능한 <액션>)' 유형에 할당할 수 없습니다.
내 가 TypeScript의 .Action:
import { Action } from '@ngrx/store';
...
switchMap((action) => {
return action.cart.flatMap((cartItem: CartItem) : Action[] => {
...
, 또한, 다을사로 Action[]가 있는 것보다 안전합니다.any!
저는 이 문제로 한동안 어려움을 겪었지만 결국 VS 코드가 자동으로 가져온다는 것을 알게 되었습니다.Observable대신 어떤 도서관에서rxjs
이것이 불필요한 헤드뱅잉을 덜어주기를 바랍니다.
저의 경우는 오류 기능을 사용하고 있었습니다.해당 오류를 제거한 후 사라졌습니다.
이전:
loadLocations$ = createEffect(() => this.action$.pipe(
ofType(loadLocationsAction),
switchMap(
() => this.service.loadLocations().then(
(response: any) => {
return loadLocationsSuccessAction({locations: response.items});
},
error => {
console.log(error);
}
)
)
));
이후:
loadLocations$ = createEffect(() => this.action$.pipe(
ofType(loadLocationsAction),
switchMap(
() => this.service.loadLocations().then(
(response: any) => {
return loadLocationsSuccessAction({locations: response.items});
}
)
)
));
저도 비슷한 오류를 본 적이 있습니다.
Type 'Observable<unknown>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'
무슨 일이 일어났는지 알아내는 가장 빠른 방법은|구분 기호유형은 일반적으로Observable<{something}>또는Observable<{something | another}>이 .|두 번째 항목은 관측 가능 항목이 아닙니다.이게 문제일 수도 있어요.
예를 들어 관측 가능한 값이 다음 값을 가질 것으로 예상되는 경우Observable<Action>하지만 파이프 운영자가 아닌 다른 것을 반환합니다.Observable<Action> 메시지에서 됩니다. 관찰의 경우 가 관 가 가 T 다 없 때 예 않 기 에 문 치 추 다 됩 니 가 유 에 형 예 상 의 지 메 시 찰 오 기 류 능 이 유 형 은 경 에 한우음 ▁for ▁in ▁the ▁does ▁exist ▁not , ▁because ▁will ▁message , ▁observ ▁t ▁unex ▁error 관 ▁the ▁in ▁to 추 다 찰 됩 ▁appended((...args: any[]) => Observable<Action>)
그 메시지에 대한 나의 해석은
을 기대해야 할지 수 .Observable<Action>=Action또는((...args: any[]) => Observable<Action>) 수 없는
문제가 즉시 명백하지 않다면, 저는 각 파이프 운영자를 하나씩 코멘트하고 오류가 발생하는지 확인합니다.만약 그렇다면, 저는 이제 이 연산자가 문제라는 것을 압니다. 연산자에 초점을 맞추고 문제를 찾는 것보다요.
다른 사용자의 답변을 읽고 싶습니다.그 두 가지 방법은 항상 저를 올바른 방향으로 향하게 합니다.
프로젝트에 이 오류가 발생하여 다음 가져오기를 추가하여 해결했습니다.
import { Observable, of as observableOf, of } from 'rxjs';
언급URL : https://stackoverflow.com/questions/57247613/ngrx-effects-type-observableunknown-is-not-assignable-to-type-observable
'itsource' 카테고리의 다른 글
| Spring MVC "redirect:" 접두사는 항상 http로 리디렉션됩니다. 어떻게 하면 https를 유지할 수 있습니까? (0) | 2023.08.05 |
|---|---|
| 내 Angular2 App에서 @Routes의 모든 경로를 나열/출력하는 방법 (0) | 2023.08.05 |
| PowerShell에서 출력 매개 변수를 사용하여 메서드를 호출하는 방법은 무엇입니까? (0) | 2023.08.05 |
| getScript를 동시에 사용 (0) | 2023.08.05 |
| sp_addlinked server를 사용하여 서버를 추가하려면 다음과 같이 하십시오. (0) | 2023.08.05 |