在typeScript中使用Redux的注意点

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

以前更新过如何在typeScript中如何使用Redux，但最近由于react和react-redux都升级了一个大版本，所以在react加typeScript的项目中使用时，有几个需要注意的地方!

redux初始化过程中

在src/index.tsx中，因为react@18.0.0做了一些改变

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import { Provider } from 'react-redux'
import store from '@/store'

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);

//需要这样包裹着跟标签
root.render(
<Provider store={store}>
<React.StrictMode>
  <App />
</React.StrictMode>
</Provider>
);

**在store.d.ts中

import store from '@/store'
import { ThunkAction } from 'redux-thunk'
import { Token } from './data'

//获取所有state的类型
export type RootState = ReturnType<typeof store.getState>

// 登录模块的Action
export type LoginAction = { type: 'LOGIN', payload: Token }

// 文章模块的Action
export type ArticleAction = {}

// 汇总到一起
type RootAction = LoginAction | ArticleAction

// 使用 thunk 中间件后的 Redux dispatch 类型
// ReturnType：thunk action 的返回类型，项目中几乎都是返回 Promise
// State: Redux 的状态  RootState
// ExtraThunkArg: 额外的参数，没有用到，可以指定为 unknown
// BasicAction: 非 thunk action，即对象形式的 action
export type RootThunkAction = ThunkAction<void, RootState, unknown, RootAction>

这一套是固定的写法，后续需要加模块，直接接着定义新的Action然后合并就可以了

注意点

由于react-redux已经升级到8.0.1，我们下载的默认版本就已经是8.0.1 但我们在组件中使用dispatch(login())这样调用函数ts会报错

报错的原因是因为升级到新版本，useDispatch的签名也发生了改变，要求必须传入tpye属性,我戳进去截图看一下，按住Ctrl鼠标单击useDispatch

export declare const useDispatch: <AppDispatch extends Dispatch<AnyAction> = Dispatch<AnyAction>>() => AppDispatch;

可以看到AppDispatch继承了Dispatch接口，我们再戳Dispatch

export interface Dispatch<A extends Action = AnyAction> {
<T extends A>(action: T): T
}

Dispatch是需要传入一个泛型并且继承Action接口，再接着戳Action

export interface Action<T = any> {
type: T
}

就可以看到这里要求我们必须出啊人一个type，type是any类型

目前我的解决的办法就是版本降级，将版本降级到8以下就没有这问题

就不再会报错，因为7版本是有两个类型声明的，一个让我们在组件中直接调用dispatch{type,payload},一个是可以调异步函数

export function useDispatch<TDispatch = Dispatch<any>>(): TDispatch;
export function useDispatch<A extends Action = AnyAction>(): Dispatch<A>;

并且redux也是正常运转的

8.0.1版本要研究一下，有小伙伴已经找到解决方法，麻烦评论告诉我下