NgRX“没有与此调用匹配的过载”

Question

我正在努力在我的 Angular 16 应用程序中设置 Ngrx。我认为我已经正确配置了 actions/reducers/selectors，但是当我在组件中调用 this.store.select() 时，我收到错误。

错误：

    /mypage.component.ts:29:42 - error TS2769: No overload matches this call.
  Overload 1 of 9, '(mapFn: (state: object) => unknown): Observable<unknown>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '(state: object) => unknown'.
  Overload 2 of 9, '(key: never): Observable<never>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'never'.

 entry_one = this.store.select('selectEntryOne')
                                 ~~~~~~~~~~~~~

我很感激任何帮助，我一定在某个地方犯了错误......

应用程序/模型/data.ts

export interface Data {
    entry_one: any;
    entry_two: any;
}

应用程序/页面/mypage.component.ts

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectEntryOne, selectEntryTwo } from '@state/selectors/data.selectors';

export class MyPageComponent {

  // Grab values from Global Store. Not Working.
  entry_one: this.store.select('selectEntryOne');
  entry_two: this.store.select('selectEntryTwo');


  constructor( private store: Store ){ }
  
  }

应用程序/状态/选择器/data.selectors.ts

import { createSelector } from '@ngrx/store';
import { AppState } from '@state/app.state';
import { DataState } from '@state/reducers/data.reducers';

export const selectData = (state: AppState) => state.data;

export const selectEntryOne = createSelector(
    selectData,
    (state: DataState) => state.data.entry_one
);

export const selectEntryTwo = createSelector(
    selectData,
    (state: DataState) => state.data.entry_two
);

应用程序/状态/reducers/data.reducers.ts

import { createReducer, on } from '@ngrx/store';
import { setData } from '@state/actions/data.actions'
import { Data } from '@models/data';

export interface DataState {
    data: Data;
    status: 'start' | 'loading' | 'error' | 'success';
    error: string;
}

export const initialState: DataState = {
    data: {
        entry_one: 100,
        entry_two: 100,
    },
    status: 'start',
    error: ''
}

export const dataReducer = createReducer(
    initialState,
    on(setEntryOne, (state, { data }) => ({
        ...state,
        data: { ...state.data, entry_one: data.entry_one },
    })),
    on(setEntryTwo, (state, { data }) => ({
        ...state,
        data: { ...state.data, entry_two: data.entry_two },
    })),

应用程序/状态/操作/data.actions.ts

import { createAction, props } from '@ngrx/store';
import { Data } from '@models/data';

export const setEntryOne = createAction(
    '[EntryOne Data] Set Entry One',
    props<{ data: Data }>()
);

export const setEntryTwo = createAction(
    '[EntryTwo Data] Set Entry two',
    props<{ data: Data }>()
);

在我的 app.module.ts 中，我有

StoreModule.forRoot({ data: dataReducer })

我完全被难住了！也许我的选择器是错误的？也许我必须用另一种方式称呼他们？

Answer 1

问题出在这个文件中：

app/pages/mypage.component.ts

，请执行以下操作：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectEntryOne, selectEntryTwo } from '@state/selectors/data.selectors';

export class MyPageComponent {

  // Grab values from Global Store. Not Working. => Remove the quotes around selectors name
  entry_one: this.store.select(selectEntryOne);
  entry_two: this.store.select(selectEntryTwo);


  constructor( private store: Store ){ }
  
  }

请注意，我删除了选择器周围的引号！意味着您应该在导入时传递选择器，而不是作为字符串！