为什么 this.store.select("uiState") return ngrx/store 中的空对象 (2.0+)

Question

我的 effect/store 中有此代码：

  @Effect() newMessages$ = Observable.interval(5000)
        .withLatestFrom(this.store.select("uiState"))
        .map(([unreadMessages, uiState]) => new NewMessagesReceivedAction({
          unreadMessages,
          currentThreadId: uiState.currentThreadId,
          currentUserId: uiState.currentUserId
        }))

Webstorm 警告我：

Property 'currentThreadId' does not exist on type '{}'.

这是我的商店文件：

     export interface ApplicationState {
      uiState: UiState,
      storeData: StoreData
    }

    export const INITIAL_APPLICATION_STATE: ApplicationState = {
      uiState: INITIAL_UI_STATE,
      storeData: INITIAL_STORE_DATA
    }

这是我的 uistate 文件：

    export interface UiState {
          userId: string;
          currentThreadId: string;
        }

        export const INITIAL_UI_STATE: UiState = {
          userId: undefined,
          currentThreadId: undefined
        }

有人知道为什么吗？

更新：

根据@cartant 的建议，我更新了@Effect() 的代码如下，我运行进入另一个Webstorm Typescirpt 错误：

      @Effect() newMessages$ = Observable.interval(5000)
        .withLatestFrom(this.store.select<UiState>("uiState"))
        .map(([any,uiState]) => uiState)
        .filter(uiState => uiState.userId) //Error right here --- As I need to filter out the uiState.userId when there is no userId when the store initialized with undefined value. 
        .switchMap(uiState => this.threadsService.loadNewMessagesForUser(uiState.userId))
        .withLatestFrom(this.store.select<UiState>("uiState"))
        .map(([unreadMessages, uiState]) => new NewMessagesReceivedAction({
          unreadMessages,
          currentThreadId: uiState.currentThreadId,
          currentUserId: uiState.userId
        }))

Argument of type '(uiState: UiState) => string' is not assignable to parameter of type '(value: UiState, index: number) => boolean'. Type 'string' is not assignable to type 'boolean'.)

我需要一种方法来过滤掉初始状态或任何空的 userId 情况，以确保我不会将 undefined 或 null 传递到 Firebase 调用中。

Answer 1

问题出在这段代码上：

this.store.select("uiState")

select 运算符从存储的状态中提取命名的属性并发出其值。但是，TypeScript 无法推断属性的类型。要解决此问题，您可以通过 type variable:

明确指定类型

this.store.select<UiState>("uiState")

关于您修改后的问题中的这一行：

.filter(uiState => uiState.userId)

filter operator 接受一个谓词，该谓词应该 return 一个 boolean 而你正在 returning userId，这是一个 string.没有隐式的TypeScript转换，所以需要显式：

.filter(uiState => Boolean(uiState.userId))

为什么 this.store.select("uiState") return ngrx/store 中的空对象 (2.0+)

Why this.store.select("uiState") return an empty object in ngrx/store (2.0+)

rxjs

redux

ngrx

angular