<aside> 😀 本章将介绍如何在Task workflow中实现 Thunk(异步操作中间件),并实现从服务器获取任务数据的功能。此外,本章还将完成整个应用的功能开发,包括添加任务展示逻辑与任务删除逻辑。

</aside>

📝Create task with Async Thunk

上一章末尾我们指定了submit按钮的处理函数creatTask,但是没有实现,现在来实现它们

1、在taskSlice中添加createTask的具体逻辑

image.png

2、在taskService中添加creatTask调用后端API的逻辑

image.png

3、在taskSlice中添加extraReducers

image.png

4、creatTask功能验证

在输入框中属于任意的文本:例如“Learn PE”,会显示类似如下的数据

image.png

数据库中也能查询到相应的数据

image.png

📝Fetching tasks form the server

上面已经写了getTask中模板代码,现在完善从后端API获取数据的业务逻辑,具体的流程和create Task相同

1、在taskService中创建getTask的调用后端API的逻辑

image.png

2、在taskSlice中创建getTask的asyncThunk

image.png