The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Question

The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Just getting started with Typescript and using VSCode.

Encountering the following Error:

*[ts] Argument of type 'void' is not assignable to parameter of type 'Action'. (parameter) action: void

Here is the code snippet causing the error:

  loadItems() {
    return this.Apiname.find()
        .map(
        (data) => console.log("data:", data)
        )
        .map(
        payload => ({
            type: 'LOAD_ITEMS',
            payload: payload
        },
        )
        )
        .subscribe(
        action => this._store.dispatch(action)//Error
        );
};

Any assistance would be greatly appreciated.

typescript visual-studio-code

Answer 1

Answer №1

Your map function may be causing issues due to a trailing comma. Consider modifying your code as shown below:

return this.Apiname.find()
    .do( (data) => console.log("data:", data) )
    .map(
        payload => ({
            type: 'LOAD_ITEMS',
            payload: payload
        })
    )
    .subscribe(
        action => this._store.dispatch(action) // no error
    );

The action variable is now of type { type: string, payload: ... }

NOTE: To perform side effects like logging with console.log, utilize the .do operator provided by ReactiveX - check out http://reactivex.io/documentation/operators/do.html

Answer 2

Your map function may be causing issues due to a trailing comma. Consider modifying your code as shown below:

return this.Apiname.find()
    .do( (data) => console.log("data:", data) )
    .map(
        payload => ({
            type: 'LOAD_ITEMS',
            payload: payload
        })
    )
    .subscribe(
        action => this._store.dispatch(action) // no error
    );

The action variable is now of type { type: string, payload: ... }

NOTE: To perform side effects like logging with console.log, utilize the .do operator provided by ReactiveX - check out http://reactivex.io/documentation/operators/do.html

The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Answer №1

Similar questions

Angular 6 - execute function on either click event OR focus event

Best practices for working with child components in Vue.js using TypeScript: Steer clear of directly mutating props

Is there a way to identify which elements are currently within the visible viewport?

Shifting attention to an angular 6 form field

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

A TypeScript function that returns a boolean value is executed as a void function

Navigating the NextJS App Directory: Tips for Sending Middleware Data to a page.tsx File

The border of the Material UI Toggle Button is not appearing

Supply type Parameters<T> to a function with a variable number of arguments

Tips for testing two conditions in Angular ngIf

Difficulty establishing a connection between Typescript and Postgres results in a prolonged

The functionality to close the Angular Material Dialog is not functioning as expected

In search of a practical and functional demonstration showcasing Electron v8 combined with TypeScript

The TypeScript compilation is missing Carousel.d.ts file. To resolve this issue, ensure that it is included in your tsconfig either through the 'files' or 'include' property

Change the variable value within the service simultaneously from various components

Accessing information from req.files in a TypeScript environment

Validating forms using TypeScript in a Vue.js application with the Vuetify

Angular Typescript Filter failing to connect with service injection

Why do callbacks in Typescript fail to compile when their arguments don't match?

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method