我按照 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() 时，浏览器中出现此错误：

错误 TypeError：Dispatch 需要一个对象，但它收到的却是一个函数。 如果您使用 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) 在 callWithDebugContext (core.js:45632) 在 Object.debugHandleEvent [as handleEvent] (core.js:45247) 在 dispatchEvent (core.js:29804) 在 core.js:42925 在 HTMLButtonElement。(platform-b​​rowser.js:2668)