reactjs - React typescript, useReducer TS2769: Ingen overbelastning samsvarer med dette kallet

Jeg tar for øyeblikket kontakt for hjelp fordi TypeScript ga meg følgende feil som jeg rett og slett ikke kan forstå når jeg prøver å skrive en useReducer.

TS2769: Ingen overbelastning matcher dette kallet. Overbelastning 1 av 5, '(reducer: ReducerWithoutAction, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', ga følgende feil. Argument av typen '(state: AuthState, action: AuthAction) => Error | { wallet: string | null; profile: { [key: string]: Object[]; } | null; account: { [key: string]: Object[]; } | null; error: { [key: string]: Object[]; } | null; }' kan ikke tildeles parameter av typen 'ReducerWithoutAction'. Overbelastning 2 av 5, '(reducer: (state: AuthState, action: AuthAction) => Error | { wallet: string | null; profile: { [key: string]: Object[]; } | null; account: { [key: string]: Object[]; } | null; error: { ...; } | null; }, initialState: never, initializer?: undefined): [...]', ga følgende feil. Argument av typen 'AuthState' kan ikke tildeles parameter av typen 'never'.

import React from 'react'

type AuthState = {
    wallet: string | null,
    profile: { [key: string]: Object[] } | null,
    account: { [key: string]: Object[] } | null,
    error: { [key: string]: Object[] } | null,
}

type AuthAction = {
    type: 'SET_WALLET' | 'SET_ACCOUNT' | 'SET_ERROR' | 'LOGOUT',
    payload: AuthState
}

const initialState: AuthState = {
    wallet: null,
    profile: null,
    account: null,
    error: null
}

const authReducer = (state: AuthState, action: AuthAction) => {
    switch (action.type) {
        case 'SET_WALLET':
            return {...state, wallet: action.payload.wallet}
        case 'SET_ACCOUNT':
            return {...state, profile: action.payload.profile, account: action.payload.account}
        case 'SET_ERROR':
            return {...state, error: action.payload.error}
        case 'LOGOUT':
            return {...state, wallet: action.payload.wallet}
        default:
            return new Error(`Unhandled  action type ${action.type}`)
    }
}

const AuthContext = React.createContext(initialState)

type Props = {
    children: JSX.Element
}

const AuthProvider = ({children}: Props) => {
    const [state, dispatch] = React.useReducer(authReducer, initialState)
    const value = {state, dispatch}
    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )
}

export {AuthContext, AuthProvider}

Hvis bare noen kunne hjelpe meg å forstå hvorfor det er slik og hva jeg gjør galt.

Svar #1

default:
  return new Error(`Unhandled  action type ${action.type}`);

Grunnen til at du får en typefeil er på grunn av denne linjen. Hvis denne saken nås, vil du returnere et feilobjekt, og erstatte tilstanden din med det i stedet for et AuthState-objekt.

Hvis du bare ønsker å loggføre en feil, kunne du gjort:

default: 
  console.error(`Unhandled action type ${action.type}`);
  return state;

Hvis du vil at det skal eksplodere i stedet, kan du kaste en feil:

default:
  throw new Error(`Unhandled  action type ${action.type}`)

Eller hvis koden er korrekt og du vil at tilstanden din skal erstattes med et feilobjekt, kan du endre typen på reduceren for å vite at Error er en mulighet:

const authReducer = (state: AuthState | Error, action: AuthAction) => {

Relaterte artikler