Redux-saga - TakeEvery 的 TypeScript 错误：TakeableChannel<unknown>答案

【问题标题】：Redux-saga - TypeScript error with TakeEvery: TakeableChannel<unknown>Redux-saga - TakeEvery 的 TypeScript 错误：TakeableChannel<unknown>
【发布时间】：2021-08-26 15:24:56
【问题描述】：

我有一个简单的 redux 传奇。


import { api } from '../api';
import * as screen from './slice';
import { fetchScreenSuccess } from './slice';

interface fetchScreenPayload {
  screenName: string;
}

interface fetchScreenAction {
  type: string;
  payload: fetchScreenPayload;
}

function* fetchScreen(api: any, action: fetchScreenAction) {
  ...
}

export default function* watchDataSource() {
  yield takeEvery(screen.fetchScreen, fetchScreen, api);
                  ^^^^^^^^^^^^^^^^^^
   Argument of type 'ActionCreatorWithoutPayload<string>' is not assignable to parameter of type 'TakeableChannel<unknown>'.
  Property 'take' is missing in type 'ActionCreatorWithoutPayload<string>' but required in type 'TakeableChannel<unknown>'.
}

切片是：

export const screenSlice = createSlice({
  name: 'screen',
  // `createSlice` will infer the state type from the `initialState` argument
  initialState,
  reducers: {
    fetchScreen(state): any {
      state.screen = initialState.screen;
      state.isLoading = true;
    },
  },
});

知道如何消除打字稿错误吗？

【问题讨论】：

标签： reactjs redux redux-saga

【解决方案1】：

我认为你的代码有两个问题：

您错误地调用了takeEvery。它应该接受动作类型作为第一个参数，然后是任意数量的生成器函数。我不确定screen.fetchScreen 做了什么，也不清楚fetchScreen 和api 是什么。但是第一个参数之后的每个参数都应该是一个生成器函数。
您的生成器函数fetchScreen 接受(api: any, action: fetchScreenAction)，它应该只接受该操作。您可以以某种方式通过操作传递api。

你可以这样写：

interface fetchScreenPayload {
  screenName: string;
  api: string;
}

interface fetchScreenAction {
  type: string;
  payload: fetchScreenPayload;
}
function* fetchScreen(action: fetchScreenAction) {
  ...
}

export default function* watchDataSource() {
  yield takeEvery('SOME_TYPE_TO_MATCH_YOUR_ACTION', fetchScreen);
}

【讨论】：