CODEWITHSUNDEEP
typescriptreact-reduxredux-saga
TheDareback
TheDareback

Reputation: 407

No overload matches this call in Redux Saga effect

I have a simple Redux Saga file, where I run takeLatest() Saga effect. But typescript gives me an 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.

Where is problem please? I was looking for some available solutions on the internet but without success.

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

Upvotes: 0

Views: 1782

Answers (1)

Martin Kadlec
Martin Kadlec

Reputation: 4975

I think the problem is in the MoviesFetchType. The takeLatest definition expects the first param of the saga to be an object which includes the type property. Since there is no type property in MoviesFetchType it doesn't match the expected type and fails.

Try using:

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

or if you don't want to have redux related info in that type then perhaps:

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

Upvotes: 2

Related Questions