Redux createStore<StoreState> produces an error: Expected 4 type arguments, but got 1

Question

I am following a TypeScript-React-Starter tutorial , and creating a store in src/index.tsx . From the tutorial,

const store = createStore<StoreState>(enthusiasm, {
  enthusiasmLevel: 1,
  languageName: 'I\'m fluent in Math and Klingon'
});

produces the error

Expected 4 type arguments, but got 1.

Issue #136 suggests using

import { EnthusiasmAction } from './actions/index';

const store = createStore<StoreState, EnthusiasmAction, any, any>(enthusiasm, {
  enthusiasmLevel: 1,
  languageName: 'I\'m fluent in Math and Klingon'
});

among other similar solutions, but that produces another error:

Argument of type '(state: StoreState, action: EnthusiasmAction) => StoreState' is not assignable to parameter of type 'Reducer<StoreState, EnthusiasmAction>'.
Types of parameters 'state' and 'state' are incompatible.
  Type 'StoreState | undefined' is not assignable to type 'StoreState'.
    Type 'undefined' is not assignable to type 'StoreState'.

The issue is closed, but other people have had the same problem since.

How do I create my store?

Answer 1

const store = createStore<StoreState>(enthusiasm, { enthusiasmLevel: 1, languageName: 'I\\'m fluent in Math and Klingon' });

produces the error

Expected 4 type arguments, but got 1.

This was due to the tutorial using Redux 3.7.2 while I was using Redux 4.0.1.

Solution #1

I installed Redux 3.7.2:

npm install redux@3.7.2

Since I was using the TypeScript-React-Starter tutorial , this was the solution that worked best with the tutorial.

Solution #2

I altered the createStore() function to take 4 type arguments as the error message suggested:

const store = createStore<StoreState, Action<any>, unknown, unknown>(enthusiasm, {
  enthusiasmLevel: 1,
  languageName: 'I\'m fluent in Math and Klingon',
});

Now I can continue the tutorial using Redux 4.0.1. :-)

Answer 2

Try create initial state in reducer instead while creating store. It should work.

export interface IStoreState {
    languageName: string;
    enthusiasmLevel: number
}

const initState: IStoreState = {
    languageName: "TypeScript",
    enthusiasmLevel: 0
}