减速器文件中action.payload的Typescript Redux类型错误答案

【问题标题】：Typescript Redux Type error of action.payload in reducer file减速器文件中action.payload的Typescript Redux类型错误
【发布时间】：2021-12-30 08:40:48
【问题描述】：

我的减速器文件中出现类型错误，我的 属性“地址”在类型“数字 |”上不存在{连接：布尔值；地址：字符串； }'。我在我的反应应用程序中使用带有 typescript 的 redux。我知道这是由于排版不正确，但我不知道怎么做。我第一次使用带有 redux 的 typescript 并陷入了这个
这是我的操作文件。

interface IMetaMaskConnection{
    type:typeof ActionType.CONNECT_META_MASK,
     payload:{
       connection:boolean,
       address:string
     }
}
interface IHourPassed{
  type:typeof ActionType.HOUR_PASSED,
  payload:number
}


export type Action = IMetaMaskConnection | IHourPassed 

export const connectMetaMaskAction = (data:IMetaMaskConnection['payload']):Action => ({
  type: ActionType.CONNECT_META_MASK,
 payload:data
});
export const setHourPassed = (data:IHourPassed['payload']):Action => ({
  type: ActionType.HOUR_PASSED,
 payload:data
});

这是我的减速机。

export const reducer= (state:IState=initialState, action:Action):IState=> {
    const {type, payload}=action;
    switch(type){
        case ActionType.CONNECT_META_MASK:
        return {
        ...state,
        address:payload.address,
        connection:payload.connection
        } 
        case ActionType.HOUR_PASSED:
        return {
        ...state,
        hourPassed:payload
        } 
        
         default:
      return state;
    }
}
export type State= ReturnType<typeof reducer>

这是我的错误截图。

【问题讨论】：

标签： javascript reactjs typescript redux react-redux

【解决方案1】：

这里的第一个问题是你真的应该使用our official Redux Toolkit package and its createSlice API 来编写你的reducer。 createSlice 还会自动为您生成动作创建者。

请参阅the Redux TS Quick Start guide，了解如何通过 TypeScript 设置和使用 RTK。

除此之外，这里的实际错误是您告诉TS“action可以是这两种类型之一”，但是{type}的解构意味着TS无法缩小动作的TS类型case 语句中的对象（尽管 TS 4.5 确实改善了这种行为）。所以，TS 仍然认为它可能是这两种动作类型中的任何一种。

但如果你改用createSlice，所有这些问题都会消失。

【讨论】：