在 react 中怎么配合 ts 发请求呢？

一般react 发thunk 请求的步骤流程是这样的： 为了方便理解我还画了一张图，就是有一丢丢的抽象.... 下面是具体的代码 首先在组件中通过 dispatch 来触发 异步的 actions 代码

dispatch (xxxaction())

然后就走到了action的具体模块里面

一般会先在store/index.ts文件里面定义数据类型

// 这里定义的是获取 reducer 里面的全部的数据
type RootState = ReturnType<typeof store.getState>
// 这里定义的是同步的
// 假如这是 xx 模块
export type xxxAction =
 {type: 'xxx/GET_LIST'. payload:string} |
 {type: 'xxx/CHANGE_LIST'. payload:string}
//这里是 yy 模块
export type yyyAction = 
{type: 'yyy/ADD_LIST'. payload:string} | 
{type: 'yyy/DEL_LIST'. payload:string}

// 然后把 各个模块合到一起
type rootActionType =  xxxAction | yyyAction 
// 这里划分了模块，是因为如果后面类型多了，都挤在一个里面，会很不方便，
//所以分模块划分，也是为了后续更好的查找数据

// 这里是异步的
// 这边的 ThunkAction 一共有 四个参数
// 类型参数1：ReturnType 用于指定函数的返回值类型 void
// 类型参数2： 指定RootState的类型
// 类型参数3： 指定额外的参数类型，一般为unkonwn或者any
// 类型参数4： 用于指定dispatch的Action类型
export type RootThunkAction = ThunkAction<void,RootState,unknown, rootActionType >

这里分发不发请求两种情况：

如果不发的话，如下

// 导入同步的 action 类型
import {xxxAction } from '../store.index'
import {Dispatch} from 'react'
export default xxxaction()：xxxAction {
	//这边要指定dispatch 的类型，这样下面的type就会有提示
	return (dispatch:Diapatch<xxxAction>) =>{
		dispatch({
		type:'字面量类型',
		payload:数据
		})
	}
}

如果发请求的话，则是这样：

// 导入异步的 action 类型
import {RootThunkAction } from '../store.index'
import {Dispatch} from 'react'
export default xxxaction()：RootThunkAction  {
	return (dispatch:Diapatch<RootThunkAction >) =>{
		// 这里先发异步请求
		const res = await axios.get('url')
		// 然后再触发 dispatch 到 reducer
		dispatch({
		type:string,
		payload:res.data
		})
	}
}

接下来就到了 reducer 里面 首先定义初始的数据类型

// 导入最开始在 store 里面定义的类型
import {xxxAction } from '../store.index'
// 定义初始值的数据类型
export type init = {id: number, name: string}
// 绑定到初始值数据上
const initstate:init = {}[] 
// s设置 state 的默认值
export default function xxx = (state= initstate, payload:xxxAction):initstate{
	 // 接下来就是判断数据类型了
	 if(action.type === 'xxx/GET_LIST') {
	 return xxx数据
	}
	// return 默认值
	return state
}

这些操作都做完之后，就可以在组件获取 reducer 的数据，来更新视图了

// 这里导入全部的类型
import {rootActionType } from '../store'
// 这里的 state 要定义数据类型，不然 下面reuren 数据是点(.)不出来的
const List = useSelcetor((state:rootActionType )=>{
// 接下来就可以愉快的用点(.)来找模块了
	return state.xxxaction
})
然后就可以通过 map 来循环创建页面数据啦！

今天的知识点就到这里，我们下期再见！