在 Redux Saga 效果中没有重载匹配此调用

Question

我有一个简单的 Redux Saga 文件，其中我运行 takeLatest() Saga 效果。但是打字稿给我一个错误：

(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.

请问哪里有问题？我一直在网上寻找一些可用的解决方案，但没有成功。

类型

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给我一个错误：没有重载匹配这个调用。它是什么以及如何解决？

谢谢！

// 编辑 - 添加切片 // 编辑 2 - 合并成一个文件

Answer 1

我认为问题出在 MoviesFetchType。 takeLatest 定义期望 saga 的第一个参数是一个包含 type 属性的对象。由于 MoviesFetchType 中没有 type 属性它与预期类型不匹配并失败。

尝试使用：

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

或者如果你不想在那种类型中有 redux 相关信息，那么也许：

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

在 Redux Saga 效果中没有重载匹配此调用

No overload matches this call in Redux Saga effect

typescript

react-redux

redux-saga