No overload matches this call. Overload 1 of 2,

Question

I have store.js file

import { createStore, combineReducers } from "redux";
import reducerADD from "../reducer/reducerADD"

export const store = createStore(combineReducers({ reducerADD}));

When I change format in store.tsx I'm getting an Error:

No overload matches this call.
  Overload 1 of 2, '(reducers: ReducersMapObject<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, any>): Reducer<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, AnyAction>', gave the following error.
    Type '(state: never[] | undefined, action: action) => { lastName: string; firstName: string; password: string; email: string; }[]' is not assignable to type 'Reducer<{ lastName: string; firstName: string; password: string; email: string; }[], any>'.
      Types of parameters 'state' and 'state' are incompatible.
        Type '{ lastName: string; firstName: string; password: string; email: string; }[] | undefined' is not assignable to type 'never[] | undefined'.
          Type '{ lastName: string; firstName: string; password: string; email: string; }[]' is not assignable to type 'never[]'.
            Type '{ lastName: string; firstName: string; password: string; email: string; }' is not assignable to type 'never'.
  Overload 2 of 2, '(reducers: ReducersMapObject<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, AnyAction>): Reducer<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, AnyAction>', gave the following error.
    Type '(state: never[] | undefined, action: action) => { lastName: string; firstName: string; password: string; email: string; }[]' is not assignable to type 'Reducer<{ lastName: string; firstName: string; password: string; email: string; }[], AnyAction>'.
      Types of parameters 'state' and 'state' are incompatible.
        Type '{ lastName: string; firstName: string; password: string; email: string; }[] | undefined' is not assignable to type 'never[] | undefined'.
          Type '{ lastName: string; firstName: string; password: string; email: string; }[]' is not assignable to type 'never[]'.

What is the reason for this?

Answer 1

The state needs to be abit more strongly typed. Its trying to cast your initial state from type any to type never.

When creating the default state for the data you should define an interface for your state, here's an example for a todo list array:

interface IAppState {
  toDoList: any[];
}
const initialState: IAppState = {
  toDoList: []
};

export default function reducer(state = initialState, action) {}

Answer 2

For future googlers:

This is also the error returned if you forget to call your function with the same inputs as used in the function definition.

Example:

const handleSaveAll = (currRow: MyItem, fileToUpload: File | undefined) => {
    //all the stuff the function does
});

The Error:

<Button className={style.btnSave} onClick={handleSaveAll}>

The Fix:

<Button className={style.btnSave} onClick={() => handleSaveAll(currRow, fileToUpload)}>