时间戳

首页 > 解决方案 > React Redux Saga 与 Typescript 错误属性不存在

reactjs - React Redux Saga 与 Typescript 错误属性不存在

问题描述

首次使用 TS 设置 React, Next js 应用程序并获得成功。

TS 在redux-saga设置时抛出以下错误：

类型“输入”上不存在属性“名称”| DataPost问候语 | ErrorPostGreeting'。“DataPostGreeting”类型上不存在属性“名称”

正确的是nametype 上不存在DataPostGreeting，这是成功响应的类型，但它确实存在于Input

有问题的操作是在测试应用程序上创建问候语的 POST。

我以为我已经正确输入了作为问候语的有效载荷Input，name但 TS 似乎对此并不满意。即使它确实识别 Input 为适用类型的一部分。

这是突出显示错误触发器的传奇：

/store/sagas/greetings.ts

import { all, call, put, takeLatest } from 'redux-saga/effects';
import { actionPostGreetingOk, actionPostGreetingError } from '../actions/creators';
import { Actions } from '../actions/names';
import { ActionTypes } from '../actions/types';
import { apiQl } from 'lib/functions';

function* postGreeting(action: ActionTypes) {
  const queryQl = `mutation createGreeting(
    $name: String!
  ) {
      createGreeting(input: {
          name: $name
      }) {
          greeting {
              id
          }
      }
  }`;


  const variables = {
     name: action.payload.name,        // *** ERROR IS THROWN HERE ***
  };


  try {
    const data = yield call(apiQl, queryQl, variables);
    if (data.errors) {
        yield put(
            actionPostGreetingError({
                error: data.errors,
            }),
        );
    } else {
        yield put(
            actionPostGreetingOk({
                greeting: data.data.createGreeting,
            }),
        );
    }
} catch (error) {
    if (error.response === undefined || error.code === 'ECONNABORTED') {
        console.log('ERROR RESPONSE UNDEFINED, ABORTED');
    }
}

export default function* greeting() {
   yield all([takeLatest(Actions.POST_GREETING, postGreeting)]);
}

在类型文件上：

...
export interface Input {
   name: string;
}
export interface ActionPostGreeting {
   type: typeof Actions.POST_GREETING;
   payload: Input;
}
...

export type ActionTypes =
  | ActionPostGreeting
  | ActionPostGreetingInit
  | ActionPostGreetingOk
  | ActionPostGreetingError
  | ActionHydrate;

动作创建者：

export const actionPostGreeting = (payload: Input): ActionPostGreeting => {
  return {
    type: Actions.POST_GREETING,
    payload,
 };
};

标签： reactjstypescriptreduxredux-saga

解决方案

您将整个ActionTypes联合传递给您的传奇，但您的函数应该只采用特定的有效负载类型（例如ActionPostGreeting）。否则，这意味着您的 saga 可以使用任何有效负载调用，要解决您的问题，您可以像这样限制类型：

function* postGreeting(action: ActionPostGreeting) {
  // do stuff

  const variables = {
    name: action.payload.name, // will be good
  };
}

推荐阅读