不懂就学！TypeScript中redux-thunk的流程

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

从react转到typescript里写redux流程，一下好不习惯，总会忘东忘西的，总结了一张流程图，遗忘的时候就过来看一下眼，刚入手ts的小伙伴可以也可以跟着画张图，这样思路会清晰很多！

话不多说先上图！

第一张自己画的有点不好看，再放一张别人的思路图，可以对比着看

然后我们具体的代码实现

1、在store/index.ts里先定义好所有的state类型RootState

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

在对应的组件中通过useSelector获取state

const { channelList, index } = useSelector(
(state: RootState) => state.channel
)

2、在store/index.ts定义具体的模块action和异步action

这个就是定义的Todo模块的action，action里同步操作也是用的这个
export type TodoActionType = { type: 'todo/UPDATE_STATE', payload: number }
{type: 'todo/ADD_STATE', payload: ToDoItem }
{type: 'todo/DEL_STATE', id: number}
{type: 'todo/INIT_STATE', initState: ToDoItem[]}

在action里同步使用，要先从store里导入TodoActionType

export const updateState = (id: number): TodoActionType =>return {
type: 'todo/DEL_STATE',
payload: id
}
}

接下来是异步的action

先把所有的action汇总到RootActionType上
export type RootActionType = TodoActionType | ChannelActionType | ArticleActionType
然后通过thunk中间件ThunkAction配置参数
// 类型参数1：ReturnType 用于指定函数的返回值类型 void
// 类型参数2： 指定RootState的类型
// 类型参数3： 指定额外的参数类型，一般为unkonwn或者any
// 类型参数4： 用于指定dispatch的Action类型
export type RootThunkAction = ThunkAction<void, RootState, unknown, RootActionType>

然后再action中使用异步action，要先从store里导入RootActionType

export function getAricle(id: number): RootThunkAction {//这里要写成RootThunkAction，因为是异步的，需要通过thunk中间件
return async (dispatch) => {
const res = await axios.get(
  `#######/v1_0/articles?channel_id=${id}&timestamp=${Date.now()}`
)
dispatch({
  type: 'GET_ARTICLE',
  payload: res.data.data.results,
})
}
}

3、在reducers中需要使用的类型

首先要在定义在reducer中定义state的类型，也就是默认值

export type ArticleItem = {
art_id: string;
title: string;
comm_count: number;
is_top: number;
cover: {
type: number;
images: string[];
}
}
//首先定义默认类型
const initValue: ArticleItem[] = []
//然后把initValue赋值给state,返回值的类型也要定义成ArticleItem[]
export default function article (state = initValue, action: TodoActionType): ArticleItem[]{
if (action.type === 'article/SET_ARTICLES'){
return action.initState
}
return state
}

这里参数的action: ArticleActionType使用的类型，也是咱们之前在store里定义的同步action的类型