reactjs - React typescript, useReducer TS2769: Niciun supraincarcare nu se potrivește cu acest apel

În prezent caut ajutor deoarece TypeScript mi-a dat următoarea eroare pe care pur și simplu nu o pot înțelege atunci când încerc să scriu un useReducer.

TS2769: Nicio suprasarcină nu corespunde acestei apelări. Suprasarcină 1 din 5, '(reducer: ReducerWithoutAction, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', a dat următoarea eroare. Argumentul de tip '(state: AuthState, action: AuthAction) => Error | { wallet: string | null; profile: { [key: string]: Object[]; } | null; account: { [key: string]: Object[]; } | null; error: { [key: string]: Object[]; } | null; }' nu este atribuit tipului 'ReducerWithoutAction'. Suprasarcină 2 din 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): [...]', a dat următoarea eroare. Argumentul de tip 'AuthState' nu este atribuit tipului '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}

Dacă doar cineva m-ar putea ajuta să înțeleg de ce este așa și ce fac greșit.

Răspuns #1

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

Motivul pentru care primești o eroare de tip este din cauza acestei linii. Dacă se ajunge la acest caz, atunci vei returna un obiect de eroare, înlocuindu-ți starea cu acesta în loc de un obiect AuthState.

Dacă vrei doar să înregistrezi o eroare, ai putea face:

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

Dacă vrei să explodeze în schimb, ai putea arunca o eroare:

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

Sau dacă codul este corect și dorești ca starea ta să fie înlocuită cu un obiect de eroare, poți schimba tipul reducer-ului pentru a ști că Error este o posibilitate:

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