NGRX 错误“调度需要一个对象，而不是它接收一个函数。如果您正在使用 createAction 函数......”

Question

我遵循了 Youtube 上的教程，并尝试创建自己的项目，但我一直在浏览器中收到错误消息，指出 Dispatch 需要一个对象。

我的模特：

export interface Football {
  title: string;
  embed: string;
  date: string;
  url: string;
  thumbnail: string;
}
export interface State {
  footballs: Football[];
  isLoading: boolean;
  error: string;
}

export const initialState: State = {
  footballs: null,
  isLoading: false,
  error: '',
};

行动：

export const loadAllSucceeded = createAction('[Football Api] Load All succeeded', props<{footballs: Football[]}>());

export const loadAllFailed = createAction('[Football Api] Load All succeeded', props<{error: string}>());

export const appComponentInitialized = createAction('[App Component] Initialized');

export const loadAllRequested = createAction('[App Component] Load All Requested');

选择器：

export const selectFeature = (state: State) => state;

export const selectFootballList = createSelector(selectFeature, (state: State) => state.footballs);
export const selectFootballIsLoading = createSelector(selectFeature, (state: State) => state.isLoading || false);
export const selectFootballError = createSelector(selectFeature, (state: State) => state.error || '');

效果：

@Injectable()
export class FootballStoreEffects {

  constructor(private footballService: FootballService, private actions$: Actions) {
  }

  loadAll = createEffect(() =>
    this.actions$.pipe(
    ofType(FootballActions.loadAllRequested),
      switchMap(() =>
    this.footballService.getFootballVideos()
      .pipe(
      map(footballs => FootballActions.loadAllSucceeded({footballs})),
      catchError(error => of(FootballActions.loadAllFailed({error})))
    )))
  );
}

减速机：

const featureReducer = createReducer(
  initialState, on(FootballActions.loadAllRequested, state => ({...state, isLoading: true, error: ''})),
  on(FootballActions.loadAllSucceeded, (state, props) => ({... state, isLoading: false, error: '', footballs: props.footballs})),
  on(FootballActions.loadAllFailed, (state, {error}) => ({... state, isLoading: false, error}) )
);

export function reducer(state: State | undefined, action: Action) {
  return featureReducer(state, action);
}

服务方式：

  getFootballVideos(): Observable<Football[]> {
    return this.http.get<FootballResult>(this.API_BASE_URL).pipe(map(result => result.value));
  }

成分 ：

export class FootballVideosComponent implements OnInit {

  footballs$: Observable<Football[]>;
  error$: Observable<string>;
  isLoading$: Observable<boolean>;

  constructor(private store: Store<State>) { }

  ngOnInit() {
    this.footballs$ = this.store.pipe(select(FootballSelectors.selectFootballList));
    this.error$ = this.store.pipe(select(FootballSelectors.selectFootballError));
    this.isLoading$ = this.store.pipe(select(FootballSelectors.selectFootballIsLoading));

  }

  onRefresh() {
    this.store.dispatch(FootballActions.loadAllRequested);
  }

}

当我执行 onRefresh() 时，我在浏览器中收到此错误：

错误类型错误：调度期望一个对象，而不是它接收一个函数。如果您正在使用 createAction 函数，请确保在分派操作之前调用该函数。例如，someAction 应该是 someAction()。在 ActionsSubject.next (store.js:159) 在 Store.dispatch (store.js:704) 在 FootballVideosComponent.onRefresh (football-videos.component.ts:29) 在 Object.eval [as handleEvent] (FootballVideosComponent.html: 3) 在 handleEvent (core.js:43993) at callWithDebugContext (core.js:45632) at Object.debugHandleEvent [as handleEvent] (core.js:45247) at dispatchEvent (core.js:29804) at core.js:42925在 HTMLButtonElement。(平台浏览器.js:2668)

Answer 1

尝试添加()如下：

onRefresh() {
  this.store.dispatch(FootballActions.loadAllRequested());
}