React typescript, useReducer TS2769: No overload matches this call

user_8193864 0
Viewed 1448

I'm currently reaching out for help as typescript gave me the following error that I cannot just make sense of it when trying to write a useReducer.

TS2769: No overload matches this call.   Overload 1 of 5, '(reducer: ReducerWithoutAction, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', gave the following error.     Argument of type '(state: AuthState, action: AuthAction) => Error | { wallet: string | null; profile: { [key: string]: Object[]; } | null; account: { [key: string]: Object[]; } | null; error: { [key: string]: Object[]; } | null; }' is not assignable to parameter of type 'ReducerWithoutAction'.   Overload 2 of 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): [...]', gave the following error.     Argument of type 'AuthState' is not assignable to parameter of type '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}

If only someone could help me understand whys that is and what I am doing wrong.

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

The reason you're getting a type error is because of this line. If this case is reached, then you'll return an error object, replacing your state with that instead of an AuthState object.

If you're just wanting to log an error, you could do:

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

If you want it to blow up instead, you could throw an error:

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

Or if the code is correct and you want your state to be replaced with an error object, you can change the type of the reducer to know that Error is a possibility:

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