Reactjs - createStore can't recognize the reducer when using typescript

Question

I am new to Reactjs and Typescript but tried to write a todo item project. but when I called createStore, I got an error in VSCode, and I can't resolve.

Any help will be much appreciated.

index.tsx

...
import { Provider } from "react-redux";
import { createStore } from "redux";
import itemReducer from "./reducers/itemReducer";

const store = createStore(itemReducer);
...

itemReducer.ts

...
export const ActionType = {
  INIT_ITEM : "INIT_ITEM",
  ADD_ITEM : "ADD_ITEM",
  EDIT_ITEM : "EDIT_ITEM",
  DEL_ITEM : "DEL_ITEM"
}


export interface Reduce_State {
  items: Todo_Item[];
}

export interface Reduce_Action {
  type: string;
  item: Todo_Item;
  items: Todo_Item[];
  itemIndex: number;
}


export default function itemReducer(state: Reduce_State, action: Reduce_Action) {
  if (!state) {
    state = {
      items: [],
    };
  }

  switch (action.type) {
    case ActionType.INIT_ITEM:
      return { items: action.items };
    default:
      return state;
}
...

when I moved my mouse to the itemReducer , the VSCode prompted me

(alias) function itemReducer(state: Reduce_State, action: Reduce_Action): Reduce_State
import itemReducer
No overload matches this call.
  Overload 1 of 2, '(reducer: Reducer<Reduce_State, Reduce_Action>, enhancer?: StoreEnhancer<unknown, unknown> | undefined): Store<Reduce_State, Reduce_Action>', gave the following error.
    Argument of type '(state: Reduce_State, action: Reduce_Action) => Reduce_State' is not assignable to parameter of type 'Reducer<Reduce_State, Reduce_Action>'.
  Overload 2 of 2, '(reducer: Reducer<Reduce_State, Reduce_Action>, preloadedState?: { items: { key: string; content: string; completed: boolean; editing: boolean; }[]; } | undefined, enhancer?: StoreEnhancer<...> | undefined): Store<...>', gave the following error.
    Argument of type '(state: Reduce_State, action: Reduce_Action) => Reduce_State' is not assignable to parameter of type 'Reducer<Reduce_State, Reduce_Action>'.ts(2769)
Peek Problem (Alt+F8)
No quick fixes available

and when I moved my mouse to createStore , I got the message:

(alias) createStore<Reduce_State, Reduce_Action, unknown, unknown>(reducer: Reducer<Reduce_State, Reduce_Action>, enhancer?: StoreEnhancer<unknown, unknown> | undefined): Store<...> (+1 overload)
import createStore

Answer 1

Judging by your error message you have a type missmatch. I personaly don' know the solution to one reducer, but what works for me is to use the combineReducers function. The combineReducers function will give you the return type, that you need for the createStore function and will enable you to use multiple reducers.

const rootReducer = combineReducers({
   itemState: itemReducer
})

Because it was a pain to use React with TS and Redux, when hooks were not mainstream, I made a repo to help people with problems regarding this topic. Maby this will help you.

https://github.com/iamnepster/react-ts-redux-todolist