reactjs - Redux TS Generic type 'Dispatch<S>' requires 1 type argument(s)

Question

Trying to setup a project with typescript and redux. I am getting this error

Generic type 'Dispatch<S>' requires 1 type argument(s).

here is my store.ts

import { connectRouter, routerMiddleware } from 'connected-react-router'
import { applyMiddleware, compose, createStore } from 'redux'
import { createLogger } from 'redux-logger'
import ReduxThunk from 'redux-thunk'

import { createBrowserHistory } from 'history'

import reducers from './reducers'

import { composeWithDevTools } from 'redux-devtools-extension'

export const history = createBrowserHistory()

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
})

const logger = createLogger()

const middleware = [ReduxThunk, logger]

const Store = createStore(connectRouter(history)(reducers), {}, composeEnhancers(applyMiddleware(...middleware, routerMiddleware(history))))

export default Store

here is root reducer

import { combineReducers } from 'redux'
import { ActionType } from 'typesafe-actions'

import * as actions from '../actions'

export interface IState {
   test: string
}

export type Actions = ActionType<typeof actions>

export default combineReducers<IState, Actions>({
  test: () => 'hey'
})

and here are some dummy actions

import { action } from 'typesafe-actions'

export const toggle = (id: string) => action('TOGGLE', id)
// (id: string) => { type: 'todos/TOGGLE'; payload: string; }

finally here is index.ts

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'
import './index.scss'
import registerServiceWorker from './registerServiceWorker'

import store, { history } from './store'

import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4
import { ConnectedRouter } from 'connected-react-router'

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */}
      <div> { /* your usual react-router v4 routing */}
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root') as HTMLElement
)
registerServiceWorker()

Here seems to be a similar issue without solution yet https://github.com/DefinitelyTyped/DefinitelyTyped/issues/9611

But I am new to typescript so might be missing something basic

Answer 1

It looks to me like you are indeed facing the same issue you linked. While we wait and see if 7mllm7's pull request is merged, you can use his modified version of the react-redux types. I'd recommend the following approach:

1. git clone --depth=1 https://github.com/7mllm7/DefinitelyTyped
2. Copy the types/react-redux folder into your project (suppose for example you copy it to a folder named react-redux.fixed).
3. Edit react-redux.fixed/package.json to replace "private": "true" with "name": "@types/react-redux".
4. In your package.json, specify the version of @types/react-redux as ./react-redux.fixed.
5. Run npm install. npm will make a symlink from node_modules/@types/react-redux to react-redux.fixed.

Compared to just editing the file in node_modules/@types/react-redux, this way npm knows you are using a modified version of the package and won't overwrite it. (This process deserves to be widely known; I'll find a better place to document it if I have time.)