Recibo un error de tipo en el archivo de mis reductores de que mi propiedad 'dirección' no existe en el tipo 'número | { conexión: booleano; dirección: cadena; }' . Estoy usando redux con mecanografiado en mi aplicación de reacción. Sé que se debe a la composición tipográfica incorrecta, pero no puedo entender cómo. Estoy usando mecanografiado con redux la primera vez y me quedé atascado en esto
Aquí está mi archivo de acciones.
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>
Esta es mi captura de pantalla de error.
El primer problema aquí es que realmente debería usar nuestro paquete oficial Redux Toolkit y su API createSlice para escribir sus reductores. createSlice también generará creadores de acciones automáticamente.
Consulte la guía de inicio rápido de Redux TS para obtener detalles sobre cómo configurar y usar RTK con TypeScript.
Más allá de eso, el error real aquí es que le dijo a TS "la action puede ser uno de estos dos tipos", pero la desestructuración de {type} significa que TS no puede reducir el tipo de TS del objeto de acción dentro de la declaración del case (aunque TS 4.5 simplemente mejoró ese comportamiento). Entonces, TS todavía piensa que podría ser cualquiera de esos dos tipos de acción.
Pero todos esos problemas desaparecerían si cambias a createSlice .