Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...