es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de tipo de acción.payload en archivo reducer de Typescript Redux.

Estoy obteniendo un error de tipo en el archivo de mis reductores que dice que mi Propiedad ‘address’ no existe en el tipo ‘number | { connection: boolean; address: string; }’. Estoy utilizando redux con typescript en mi aplicación de react. Sé que se debe a la escritura incorrecta de tipos, pero no puedo resolverlo. Es la primera vez que uso typescript con redux y me he atascado en esto. Aquí está mi archivo de acciones.

interface IMetaMaskConnection{
    type:typeof ActionType.CONNECT<em>META</em>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<em>META</em>MASK,
 payload:data
});
export const setHourPassed = (data:IHourPassed['payload']):Action => ({
  type: ActionType.HOUR_PASSED,
 payload:data
});

Este es mi reductor.

export const reducer= (state:IState=initialState, action:Action):IState=> {
    const {type, payload}=action;
    switch(type){
        case ActionType.CONNECT<em>META</em>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="">

Este es mi error en la captura de pantalla: https://i.stack.imgur.com/OXVDO.png.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema es que estás intentando acceder a la propiedad address del objeto payload en tu reductor, pero el tipo de payload no está establecido correctamente. El tipo de payload debería ser IMetaMaskConnection['payload'] cuando el tipo de la acción es ActionType.CONNECT_META_MASK, y IHourPassed['payload'] cuando el tipo de la acción es ActionType.HOUR_PASSED.

    Para solucionar esto, puedes cambiar el tipo de payload en tu reductor a IMetaMaskConnection['payload'] | IHourPassed['payload']:

    “`javascript
    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
    “`

Comments are closed.