React Native+Typescript环境下使用Redux报Action无type属性错误如何解决

你触发的报错是因为Redux要求所有派发的action必须包含type字段，代码问题出在两处：

1. Saga的getOTPVerified方法中，put函数传入的对象没有添加type属性，不符合Redux action的格式要求
2. 逻辑冗余：你当前的setOTPVerified是纯同步action，reducer已经可以直接处理该action完成状态更新，完全不需要额外通过saga监听处理，现有写法还会导致同类型action被反复触发的死循环问题

方案1（适配当前场景，推荐）：移除多余的saga监听逻辑 #

你当前只是要存储一个布尔状态，没有异步处理需求，直接删除Saga.tsx中对OTP_VERIFIED的监听代码即可，删除后状态会直接被reducer正确更新。

方案2（如果确实需要在saga中处理该action的额外逻辑）： #

修改getOTPVerified方法，要么处理完逻辑后不需要再put同类型action，要么put时补充正确的type且不要和监听的type重复避免死循环，示例修改如下：

import { put, takeLatest } from 'redux-saga/effects';
import { OTP_VERIFIED } from './Action'; // 注意引入正确的常量

function* getOTPVerified(action: { type: string, OTPVerified: boolean }) {
  // 这里可以加你需要的额外逻辑，比如日志上报、触发其他异步请求等
  // 不要重复put OTP_VERIFIED类型的action，避免循环触发
  // 如果确实需要put新的action，要给新action加上独立的type字段
  yield put({
    type: 'OTHER_ACTION_TYPE', // 必须补充合法的type值
    OTPVerified: action.OTPVerified,
  });
}

export default function* extrasSaga() {
  yield takeLatest(OTP_VERIFIED, getOTPVerified);
}

你当前的代码里大量使用any类型，没有发挥TS的类型校验作用，可以做如下优化：

1. 给Action定义明确的类型

// Action.tsx 新增类型定义
export const OTP_VERIFIED = 'OTP_VERIFIED' as const;
export type OTPVerifiedAction = {
  type: typeof OTP_VERIFIED,
  OTPVerified: boolean
}
export const setOTPVerified = (OTPVerified: boolean): OTPVerifiedAction => {
  return {
    type: OTP_VERIFIED,
    OTPVerified,
  };
};

2. 优化Reducer的类型定义

// Reducer.tsx 优化类型
import { OTP_VERIFIED, OTPVerifiedAction } from './Action';

export interface ExtrasParams {
  OTPVerified: boolean; // 去掉any，明确是布尔类型
}

const initialData: ExtrasParams = {
    OTPVerified: false,
};

// action明确指定为联合类型，后续新增action可以往联合类型里加
type ExtrasAction = OTPVerifiedAction;
const extrasReducer = (state = initialData, action: ExtrasAction): ExtrasParams => {
    switch (action.type) {
      case OTP_VERIFIED:
        return {...state, OTPVerified: action.OTPVerified};
      default:
        return state;
    }
};

内容的提问来源于stack exchange，提问作者pratteek shaurya