angular - NGRX 错误 "Dispatch expected an object, instead it received a function. If you' 重新使用 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})))
    )))
  );
}

reducer :

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() 时，我在浏览器中收到此错误:

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

Answer 1

尝试添加 () 像这样:

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