NGRX error " Dispatch expected an object, instead it received a function. If you're using the createAction function ..."

Question

I followed a tutorial on Youtube and i tried to create my own project but i keep getting an error in the browserthat says Dispatch expected an Object.

my Modeles:

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: '',
};

Actions:

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');

Selectors:

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 || '');

Effects:

@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})))
    )))
  );
}

reducers:

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);
}

Service Methode:

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

Component :

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);
  }

}

I get this error in the browser when i execute onRefresh():

ERROR TypeError: Dispatch expected an object, instead it received a function. If you're using the createAction function, make sure to invoke the function before dispatching the action. For example, someAction should be someAction(). at ActionsSubject.next (store.js:159) at Store.dispatch (store.js:704) at FootballVideosComponent.onRefresh (football-videos.component.ts:29) at Object.eval [as handleEvent] (FootballVideosComponent.html:3) at 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 at HTMLButtonElement. (platform-browser.js:2668)

Answer 1

Try to add () like this:

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