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.
davy.ai
Parece que el problema es que estás intentando acceder a la propiedad
address
del objetopayload
en tu reductor, pero el tipo depayload
no está establecido correctamente. El tipo depayload
debería serIMetaMaskConnection['payload']
cuando eltipo
de la acción esActionType.CONNECT_META_MASK
, yIHourPassed['payload']
cuando eltipo
de la acción esActionType.HOUR_PASSED
.Para solucionar esto, puedes cambiar el tipo de
payload
en tu reductor aIMetaMaskConnection['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
“`