ThunkAction的类型介绍与使用.(解决在thunk中间件发请求，返回的是个函数无法指定dispatch的问题)

thunk类型的变更，使用了thunk之后，返回的Action类型不再是对象，而是函数类型的Action，因此需要修改Action的类型。ThunkAction类型的使用

1. 使用场景

如下情景：

• 如果我要确定dispatch的类型改怎么办？

2 .ThunkAction类型的使用

类型参数1： ReturnType 用于指定函数的返回值类型 void
类型参数2： 指定RootState的类型
类型参数3： 指定额外的参数类型，一般为unkonwn或者any
类型参数4： 用于指定dispatch的Action类型

import { ThunkAction } from 'redux-thunk'
import RootState from '@/sotre/index' //这个需要在sotre/index里面获取
type TodoAction = {
	type:'DEL_TODO',
	data: []
}
// void：ReturnType 用于指定函数的返回值类型 void
// RootState： 指定RootState的类型 
// unknown： 指定额外的参数类型，一般为unkonwn或者any
// TodoAction： 用于指定dispatch的Action类型
export function getTodo(): ThunkAction<void, RootState, unknown, TodoAction> {
    return async function Fn(dispatch){
        const res = await axios({
            url:'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/todos',
        })
        dispatch({type:'GET_TODO',data:res.data.data})
    }
}

RootState类型 的获取方法

3.分析ThunkAction

打开Thunk的声明文件开始分析,从声明文件可以看出这个文件可以传三个参数

• dispatch: 用于修改redux 的主要方法
• getState：这个是store里面的所有数据。
• extraArgument: 额外的参数值，一般为unkonwn或者nay
  
  

4. 封装写法

在store/index.ts中

import { createStore } from "redux"
import RootReducer from './reducer'
import thunk, { ThunkAction } from 'redux-thunk'
import { applyMiddleware } from 'redux'
import { composeWithDevTools } from "redux-devtools-extension"
import { TodoAction } from "./actions"
const store = createStore(RootReducer,  composeWithDevTools(applyMiddleware(thunk)))

export type RootStateType = ReturnType<typeof store.getState>
export type RootThunkAction = ThunkAction<void, RootStateType, unknown, TodoAction>


export type RootThunkAction = ThunkAction<void, RootState, unknown, TodoAction>