Redux Saga effect does not have a matching overload for this call

Encountering an error in my Redux Saga file, specifically when using the takeLatest() Saga effect. TypeScript is throwing the following error:

(alias) const getMovies: ActionCreatorWithoutPayload<string>
import getMovies
No overload matches this call.
  The last overload gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'TakeableChannel<unknown>'.ts(2769)
effects.d.ts(291, 17): The last overload is declared here.

Can anyone help me pinpoint the issue? I've tried searching for solutions online but haven't had any luck.

TYPES

export type Movie = { title: string; year: number };

export type MovieState = {
  moviesList: Movie[];
  totalResults: number;
};

export type MoviesFetchType = {
  payload: { query: string; page: number };
};

export type MoviesType = {
  status: number;
  json: () => number;
};

export type FormatedMoviesType = {
  Search: Movie[];
  totalResults: number;
};

SAGA + SLICE

import { call, put, fork, takeLatest } from "redux-saga/effects";
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import {Movie, MovieState, MoviesFetchType, MoviesType, FormatedMoviesType} from "./types";

// SLICE

const initialState = {
  moviesList: [{}],
  totalResults: 0
} as MovieState;

const movieSlice = createSlice({
  name: "movie",
  initialState,
  reducers: {
    getMovies(name) {
      return name;
    },
    setMovies: (state, action: PayloadAction<Movie[]>) => {
      state.moviesList = action.payload;
    }
  }
});

const { getMovies, setMovies } = movieSlice.actions;

// SAGA

function* moviesFetch({ payload }: MoviesFetchType) {
  const { query, page } = payload;
  const movies: MoviesType = yield call(() =>
    fetch(`https://example.com/&s=${query}&page=${page}`)
  );
  const formatedMovies: FormatedMoviesType = yield movies.json();
  yield put(setMovies(formatedMovies["Search"]));
}

function* moviesSaga() {
  // HERE IS PROBLEM
  yield takeLatest(getMovies.type, moviesFetch);
}

export const moviesSagas = fork(moviesSaga);

getMovies.type give me an error: No overload matches this call. What is it and How to solve it?

Thank you!

// EDIT - add Slice // EDIT 2 - merge into one file

Answer №1

The issue could be in the definition of MoviesFetchType. The takeLatest function requires the first parameter of the saga to be an object containing the type property. If MoviesFetchType does not have a type property, it will not match the expected type and lead to failure.

You can try updating it to:

export type MoviesFetchType = {
  payload: { query: string; page: number };
  type: string;
};

If you prefer not to include redux-related information in the type, you can modify it as follows:

export type MoviesFetchType = {
  query: string;
  page: number;
};
// ...
function* moviesFetch({ payload }: {type: string; payload: MoviesFetchType}) {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve component name using React.Children

While working with react in the nextjs framework, I attempted to create my own dropdown component structured as follows: <Dropdown> <DropdownToggle>Action</DropdownToggle> <DropdownMenu> <DropdownItem>Menu 1</Dr ...

Create a rectangle on the canvas using the Fabric.js library in an Angular application

I am attempting to create a rectangle inside a canvas with a mouse click event, but I am encountering some issues. The canvas.on('selection:created') event is not firing as expected. Below is my code: let can = new fabric.Canvas('fabricCanv ...

react-query: QueryOptions not functioning as expected when utilizing userQueries()

When passing certain "query options" while using useQueries() to fetch multiple queries simultaneously, these specified "query options" do not get applied during query executions (e.g. refetchOnWindowFocus has a value of true but I want it to be false). F ...

React-leaflet with TypeScript is failing to display GeoJSON Points on the map

I am attempting to display points on a map using geojson points in my react application with react-leaflet. However, for some unknown reason, the points are not rendering on the map. When I try importing a JSON file, I encounter an error: TS2322: Ty ...

The MaxDuration feature for a 5-minute time limit is malfunctioning on the Serverless Pro Plan, resulting in a 504 ERROR on

I am currently using Next.js@latest with App Directory My application is hosted on Vercel I'm experiencing a 504 error from Vercel and I'm on the pro plan. My serverless functions are set to run for up to 5 minutes, but usually, they only take ...

Encountering a "subscribe is not a function" error while attempting to utilize a JSON file in Angular 2

My attempt to import a JSON file into my service is resulting in the following error: Error: Uncaught (in promise): TypeError: this._qs.getBasicInfo(...).subscribe is not a function(…) The current state of my service file is as follows @Injectable() ...

Navigating with header tags and using the navbar in react-router

Here is the code snippet I am working with App.tsx import React, { FC, Fragment } from "react"; import Nav from "./Components/Nav/Nav"; const App: FC = () => ( <Fragment> <Nav /> </Fragment> ); export default App; Nav.tsx ...

Angular: Safely preserving lengthy content without the use of a database

As a beginner working on an Angular 11 educational website with approximately 20 static articles, I created a component template for the articles to receive text inputs. However, I am wondering if there is a more efficient way to handle this. Is there a ...

Mapping an HTTP object to a model

Currently facing an issue with mapping an http object to a specific model of mine, here is the scenario I am dealing with: MyObjController.ts class MyObjController { constructor ( private myObj:myObjService, private $sco ...

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Having trouble with using an Observable in my Angular2.rc.4 Typescript app. Check out the plunker for it here: https://embed.plnkr.co/UjcdCmN6hSkdKt27ezyI/ The issue revolves around a service that contains this code: private messageSender : Observable< ...

How can I retrieve the value of a nested reactive form in Angular?

I'm working with a nested form setup that looks like this: profileForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), address: new FormGroup({ street: new FormControl(''), ...

Potentially null object in react typescript

In my React application with TypeScript, I have completed the implementation of a chart but encountered an error in the following line: backgroundColor: gradientFill ? gradientFill : chartRef.current.data.datasets[0].backgroundColor, T ...

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Trying to enforce strict typing for a Button component in React. How can I ensure a prop has a specific string value? The current effort yields Type '"primary"' is not assignable to type 'ButtonLevel' enum ButtonLevel { Primary = ...

Convert Time: segment time devoted to the main content from the time dedicated to advertisements

Can anyone assist me with solving a math problem? Let's consider two lists or arrays: Content Array 0-50 = C1 50-100 = C2 AD Array 10-20 = A1 30-60 = A2 80-140 = A3 The desired output should be: 0-10 = C1 10-20 = A1 20-30 = C1 30-60 = A2 60-80 = C ...

What is the best way to ensure that GCM push notifications are still received even when the app is closed or the

Currently, I'm in the process of developing an application using Ionic 2 that requires push notifications to be received. In certain scenarios, such as when the app is force-stopped on Android or when the device is turned off, push notifications are ...

Apply a CSS class when the tab key is pressed by the user

Currently in my Angular 14 project, I am working on a feature where I need to apply "display: block" to an element once the user reaches it using the tab key. However, I am struggling with removing the "display: block" when the user tabs out of the element ...

What steps should be followed in order to generate a child or item with no assigned key

Here is my TypeScript code designed to automatically record the time of data creation: import * as functions from 'firebase-functions'; export const onAccCreate = functions.database .ref('/Agent/{AgentID}') .onCreate((snapshot, contex ...

Is it possible to use TypeScript or Angular to disable or remove arrow key navigation from a PrimeNG Table programmatically?

Is there a way to programmatically prevent left and right arrow key navigation in a PrimeNG Table with cell editing, without the need to modify the Table component source code? You can check out an example here: Angular Primeng Tableedit Demo code. I mana ...

Error: Android package not found when building a NativeScript app with TypeScript

I encountered the following error message: main-page.ts(15,26): error TS2304: Cannot find name 'android'. This error occurred after setting up a new NativeScript project using TypeScript. tns create demo --template typescript I then added the ...

When the React Native Expo app is running, the TextInput form is covered by the keyboard

When I launch the app using expo and implement my DateFormInput component, the issue of Keyboard covering TextInput arises. Despite trying packages like "@pietile-native-kit/keyboard-aware-scrollview", "@types/react-native-keyboard-spacer", "react-native-k ...