Type 'function that accepts an argument of type User and TypedAction<"login start"> and returns void'

Question

Type 'function that accepts an argument of type User and TypedAction<"login start"> and returns void'

I recently started learning TypeScript and I'm delving into state management in Angular 11. However, when I try to create an effect, I encounter an error stating Argument of type '(action: User & TypedAction<"login start">) => void'.

I have attempted the following code:

  login$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(loginstart),

      //   Argument of type '(action: User & TypedAction<"login start">) => void' is not assignable to parameter of type '(value: User & TypedAction<"login start">, index: number) => ObservableInput<any>'.
      //   Type 'void' is not assignable to type 'ObservableInput<any>'
      exhaustMap((action) => {
        console.log(action);
      })
    );
  });

Action
const LOGIN_START = 'login start';
export const loginstart = createAction(LOGIN_START, props<User>());

export interface User {
  name: string;
  email: string;
}

How should I go about resolving this issue?

javascript angular typescript ngrx ngrx-effects

Answer 1

Answer №1

The reason for this issue is that you are not returning Action from Effect.

      @Effect()
  login$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(loginstart),

      //   Argument of type '(action: User & TypedAction<"login start">) => void' is not assignable to parameter of type '(value: User & TypedAction<"login start">, index: number) => ObservableInput<any>'.
      //   Type 'void' is not assignable to type 'ObservableInput<any>'
      exhaustMap((action) => {
        console.log(action);
        return of(someAction)
      })
    );
  });
  constructor(private actions$: Actions) {}

You can define the returned action as needed:

export const someAction = createAction('login start success or something');

Answer 2

The reason for this issue is that you are not returning Action from Effect.

      @Effect()
  login$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(loginstart),

      //   Argument of type '(action: User & TypedAction<"login start">) => void' is not assignable to parameter of type '(value: User & TypedAction<"login start">, index: number) => ObservableInput<any>'.
      //   Type 'void' is not assignable to type 'ObservableInput<any>'
      exhaustMap((action) => {
        console.log(action);
        return of(someAction)
      })
    );
  });
  constructor(private actions$: Actions) {}

You can define the returned action as needed:

export const someAction = createAction('login start success or something');

Type 'function that accepts an argument of type User and TypedAction<"login start"> and returns void'

Answer №1

Similar questions

Creating a Typescript type that specifically accepts a React component type with a subset of Props

Encountering difficulties in running bootstrap on nodejs

Tips on utilizing spin.js in client-side scripts (Javascript and Node)

Using AngularJS to convert a JSON object into an array

Using Vue 3 to transfer data within the <slot> element

Legends for Jqplot Donut Chart disappearing after saving changes

Stop the setTimeout function after redirecting in the controller

Show a table row based on a specific condition in Angular

Naming variables in JavaScript with parentheses()

Enable Submit Button on Click Using jQuery

Deactivate the input fields within a dynamic form

Utilizing combinedReducers will not prompt a re-render when dispatching actions

What is the process for setting up a server-side Meteor Collection without the necessity of direct interaction?

Looking to create a timepicker in ReactJS similar to the Uber timepicker, with the added feature of a "Now"

Is there a way to combine two independent javascripts into a single script?

Is there a way to mark a template-driven form as invalid when a custom field validator fails in my Angular 15 application?

While attempting to update the package.json file, I encountered an error related to the polyfills in Angular

Running a function of a component from within another component

Setting the text alignment using the innerHTML property of CSS

Comparing Redux with passing state down to components as props from the top level of the application