NGRX影响withLatestFrom Typescript错误ts2345疑难解答

时间:2019-07-31 17:32:42

标签: javascript angular typescript rxjs ngrx

我不确定如何继续解决此ts2345错误,并可以使用一些帮助来了解其原因。

错误详细信息

  

'(source $:Observable)=> Observable'类型的参数不能分配给'OperatorFunction'类型的参数。

     

参数'source $'和'source'的类型不兼容。

     

import(“ c:/ Users / Flignats / Documents / GitHub / reqloot / node_modules / rxjs / internal / Observable”)。Observable'不能分配给类型import(“ c:/ Users / Flignats / Documents / GitHub / reqloot / node_modules / rxjs / internal / Observable“)。Observable'。

     

类型'import(“ c:/Users/Flignats/Documents/GitHub/reqloot/src/app/modules/guilds/guilds.state”)。State中缺少属性'user',但在类型'import中是必需的(“ c:/Users/Flignats/Documents/GitHub/reqloot/src/app/modules/user/user.state”)。State'.ts(2345)

     

user.state.ts(19,3):此处声明为“用户”。

这是我在“公会”功能中的效果文件

guilds.effects.ts

import { IPrivateGuildDetails } from './guilds.model';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { of } from 'rxjs';
import {
    map,
    mergeMap,
    catchError,
    withLatestFrom,
    switchMap,
    tap,
    filter
} from 'rxjs/operators';
// Core
import * as fromCore from '../../core';
import * as fromAuth from '../../core/auth/auth.selectors';
import * as fromUser from '../user/user.selectors';
// Key
export const GUILDS_KEY = 'GUILDS';
// State
import { State, selectGuilds } from './guilds.state';
// Actions
import {
    createGuild,
    createGuildSuccess,
    createGuildFailure,
    loadPublicGuilds,
    loadPublicGuildsSuccess,
    loadPublicGuildsFailure,
    loadTriggerStatusCreateGuild,
    loadTriggerStatusCreateGuildFailure,
    loadTriggerStatusCreateGuildSuccess,
    selectPublicGuild,
    loadPublicGuild,
    loadPublicGuildSuccess,
    loadPublicGuildFailure,
    loadMyGuild,
    loadMyGuildSuccess,
    loadMyGuildFailure
} from './guilds.actions';

@Injectable()
export class GuildsEffects {
    loadMyGuild$ = createEffect(() =>
        this.actions$.pipe(
            ofType(loadMyGuild),
            withLatestFrom(this.store.pipe(select(fromUser.selectUserAccountDetails))),
            switchMap(([action, user]) =>
                this.afs.loadMyGuild(user).pipe(
                    map((result: IPrivateGuildDetails) => loadMyGuildSuccess({ myGuild: result })),
                    catchError(error => of(loadMyGuildFailure({ error })))
                )
            )
        )
    );

    loadTriggerStatusCreateGuild$ = createEffect(() =>
        this.actions$.pipe(
            ofType(loadTriggerStatusCreateGuild),
            withLatestFrom(this.store.pipe(select(fromAuth.selectUid))),
            mergeMap(([action, uid]) =>
                this.afs.getTriggerStatusCreateNewGuild(uid).pipe(
                    map(triggerStatus =>
                        loadTriggerStatusCreateGuildSuccess({ triggerStatus })
                    ),
                    catchError(error =>
                        of(loadTriggerStatusCreateGuildFailure({ error }))
                    )
                )
            )
        )
    );

  constructor(
    private actions$: Actions,
    private afs: fromCore.FirestoreService,
    private localStorageService: fromCore.LocalStorageService,
    private router: Router,
    private store: Store<State>
  ) {}
    }

guilds.state.ts

import { ActionReducerMap, createFeatureSelector } from '@ngrx/store';
import { AppState } from '@app/core';

import { guildsReducer } from './guilds.reducer';
import { GuildsStateDetails } from './guilds.model';

export const FEATURE_NAME = 'guilds';

export interface GuildsState {
  state: GuildsStateDetails;
};

export const reducers: ActionReducerMap<GuildsState> = {
  state: guildsReducer
};

export const selectGuilds = createFeatureSelector<State, GuildsState>(FEATURE_NAME);

export interface State extends AppState {
  guilds: GuildsState;
};

loadMyGuild$中,LatestFrom select fn产生了错误

loadTriggerStatusCreateGuild$效果正在使用核心模块中的一个选择,并且不会产生错误。

如果我使用loadMyGuild$模块中的选择器(即Guilds)来更新selectGuilds withLatestFrom选择器,则没有错误。

我不确定在尝试在User功能模块中使用其选择器时,Guilds功能模块中可能引起此错误的差异。

user.state.ts

import { ActionReducerMap, createFeatureSelector } from '@ngrx/store';
import { AppState } from '@app/core';

import { userReducer } from './user.reducer';
import { UserStateDetails } from './user.model';

export const FEATURE_NAME = 'user';
export const selectUser = createFeatureSelector<State, UserState>(FEATURE_NAME);

export const reducers: ActionReducerMap<UserState> = {
  state: userReducer
};

export interface UserState {
  state: UserStateDetails;
}

export interface State extends AppState {
  user: UserState;
}

user.selectors.ts

import { createSelector } from '@ngrx/store';

import { UserState, selectUser } from './user.state';

export const selectActiveUser = createSelector(
  selectUser,
  (state: UserState) => state.state
);

export const selectUserAccountDetails = createSelector(
  selectUser,
  (state: UserState) => state.state.account
);

export const selectUserLoading = createSelector(
  selectUser,
  (state: UserState) => state.state.loading
);

export const selectUserError = createSelector(
  selectUser,
  (state: UserState) => state.state.error
);

user.model.ts

import { HttpErrorResponse } from '@angular/common/http';
import { Timestamp } from '@firebase/firestore-types';

export interface IUser {
  applixir?: {
    lastWatchedAt?: Timestamp;
    staminaLastGiven?: Timestamp;
    totalAdsWatched?: number;
    totalStaminaCollected?: number;
    currentAdsTrackedCount: number;
  };
  balance: {
    claimed: number;
    unclaimed: number;
  };
  createdAt: Timestamp;
  displayName?: string;
  email: string;
  fcmTokens?: { [token: string]: true };
  guildDetails?: {
    attacks: { [key: string]: number };
    boosts: { [key: string]: { [key: string]: number } };
    guildId: string;
    guildTokensCollected: number;
    guildTokensCollectedCount: number;
    shield: { [key: string]: number };
  };
  referredBy?: string;
  referredAt?: Timestamp;
  stamina: number;
  staminaLastGiven?: Timestamp;
  subscriberStamina?: number;
  subscriberStaminaLastGiven?: Timestamp;
  uid: string;
  updatedAt?: Timestamp;
}

export interface UserStateDetails {
  error: HttpErrorResponse | string;
  loading: boolean;

  account: IUser;
}

1 个答案:

答案 0 :(得分:1)

您使用了错误的存储-您注入了效果Store<State>,其中State是公会状态,当然用户选择器对此无效。您需要使用用户状态注入Store并使用它。