Redux TS 通用类型“Dispatch<S>"需要 1 个类型参数 [英] Redux TS Generic type 'Dispatch<S>' requires 1 type argument(s)

问题描述

尝试使用 typescript 和 redux 设置项目.我收到此错误

通用类型'Dispatch'需要 1 个类型参数.

这是我的store.ts

import { connectRouter, routerMiddleware } from 'connected-react-router'import { applyMiddleware, compose, createStore } from 'redux'从redux-logger"导入 { createLogger }从redux-thunk"导入 ReduxThunk从历史"导入 { createBrowserHistory }从 './reducers' 导入减速器从redux-devtools-extension"导入 { composeWithDevTools }导出 const 历史记录 = createBrowserHistory()const composeEnhancers = composeWithDevTools({//此处指定名称、actionsBlacklist、actionsCreators 和其他需要的选项})const 记录器 = createLogger()const 中间件 = [ReduxThunk, logger]const Store = createStore(connectRouter(history)(reducers), {}, composeEnhancers(applyMiddleware(...middleware, routerMiddleware(history))))导出默认商店

这里是根减速器

import { combineReducers } from 'redux'从typesafe-actions"导入 { ActionType }导入 * 作为来自'../actions'的动作导出接口 IState {测试:字符串}导出类型 Actions = ActionTypeexport default combineReducers({测试:() =>'嘿'})

这里有一些虚拟动作

import { action } from 'typesafe-actions'export const toggle = (id: string) =>动作('切换'，ID)//(id: string) =>{ 类型:'待办事项/切换';有效载荷:字符串；}

最后是 index.ts

import * as React from 'react'import * as ReactDOM from 'react-dom'从'./App'导入应用程序导入'./index.scss'从 './registerServiceWorker' 导入 registerServiceWorker导入商店，{历史}来自'./store'从'react-redux'导入{提供者}import { Route, Switch } from 'react-router'//react-router v4从'connected-react-router'导入{ConnectedRouter}ReactDOM.render(<提供者商店={商店}><ConnectedRouter history={history}>{/* 将 ConnectedRouter 放在 Provider 下 */}<div>{/* 你常用的 react-router v4 路由 */}<开关><路由精确路径="/" render={() =>(<div>匹配</div>)}/><路由渲染={()=>(<div>小姐</div>)}/></开关>

</ConnectedRouter></提供者>,document.getElementById('root') 作为 HTMLElement)注册服务工作者()

这里似乎是一个类似的问题还没有解决方案https://github.com/DefinitelyTyped/DefinitelyTyped/issues/9611

但我是打字稿的新手，所以可能缺少一些基本的东西

解决方案

在我看来，您确实面临与您链接的相同的问题.在我们等待 7mllm7 的 pull request 是否合并的同时，您可以使用他的 react-redux 类型的修改版本.我推荐以下方法:

1. git clone --depth=1 https://github.com/7mllm7/DefinitelyTyped
2. 将 types/react-redux 文件夹复制到您的项目中(例如，假设您将其复制到名为 react-redux.fixed 的文件夹中).
3. 编辑 react-redux.fixed/package.json 以将 "private": "true" 替换为 "name": "@types/react-redux".
4. 在您的 package.json 中，将 @types/react-redux 的版本指定为 ./react-redux.fixed.
5. 运行npm install.npm 将创建一个从 node_modules/@types/react-redux 到 react-redux.fixed 的符号链接.

与仅在 node_modules/@types/react-redux 中编辑文件相比，这种方式 npm 知道您正在使用包的修改版本并且不会覆盖它.(这个过程值得广为人知；如果我有时间，我会找到一个更好的地方来记录它.)

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

解决方案

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

这篇关于Redux TS 通用类型“Dispatch<S>"需要 1 个类型参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！