Reducer 文件中 action.payload 的 Typescript Redux 类型错误

Question

我的 reducer 文件中出现类型错误，我的 属性 'address' 在类型 'number | { connection: boolean; address: string; }' 上不存在。我在我的 React 应用程序中使用 redux 和 typescript。我知道这是由于排版不正确造成的，但我不知道如何解决。我第一次使用带有 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>

这是我的错误截图。

Answer 1

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

有关如何使用 TypeScript 设置和使用 RTK 的详细信息，请参阅 the Redux TS Quick Start guide。

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

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

Reducer 文件中 action.payload 的 Typescript Redux 类型错误

Typescript Redux Type error of action.payload in reducer file

javascript

typescript

reactjs

redux

react-redux