title: Reactjs - createStore can't recognize the reducer when using typescript
body: <p>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. </p>
  
  <p>Any help will be much appreciated.</p>
  
  <p>index.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  import { Provider } from "react-redux";
  import { createStore } from "redux";
  import itemReducer from "./reducers/itemReducer";
  
  const store = createStore(itemReducer);
  ...
  </code></pre>
  
  <p>itemReducer.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  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;
  }
  ...
  </code></pre>
  
  <p>when I moved my mouse to the <code>itemReducer</code>, the VSCode prompted me </p>
  
  <pre class="lang-js prettyprint-override"><code>(alias) function itemReducer(state: Reduce_State, action: Reduce_Action): Reduce_State
  import itemReducer
  No overload matches this call.
    Overload 1 of 2, '(reducer: Reducer&lt;Reduce_State, Reduce_Action&gt;, enhancer?: StoreEnhancer&lt;unknown, unknown&gt; | undefined): Store&lt;Reduce_State, Reduce_Action&gt;', gave the following error.
      Argument of type '(state: Reduce_State, action: Reduce_Action) =&gt; Reduce_State' is not assignable to parameter of type 'Reducer&lt;Reduce_State, Reduce_Action&gt;'.
    Overload 2 of 2, '(reducer: Reducer&lt;Reduce_State, Reduce_Action&gt;, preloadedState?: { items: { key: string; content: string; completed: boolean; editing: boolean; }[]; } | undefined, enhancer?: StoreEnhancer&lt;...&gt; | undefined): Store&lt;...&gt;', gave the following error.
      Argument of type '(state: Reduce_State, action: Reduce_Action) =&gt; Reduce_State' is not assignable to parameter of type 'Reducer&lt;Reduce_State, Reduce_Action&gt;'.ts(2769)
  Peek Problem (Alt+F8)
  No quick fixes available
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/714GL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/714GL.png" alt="enter image description here"></a></p>
  
  <p>and when I moved my mouse to <code>createStore</code>, I got the message: </p>
  
  <pre class="lang-js prettyprint-override"><code>(alias) createStore&lt;Reduce_State, Reduce_Action, unknown, unknown&gt;(reducer: Reducer&lt;Reduce_State, Reduce_Action&gt;, enhancer?: StoreEnhancer&lt;unknown, unknown&gt; | undefined): Store&lt;...&gt; (+1 overload)
  import createStore
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MH5Od.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MH5Od.png" alt="enter image description here"></a></p>