Flutter 使用 Redux 的中间件实现异步状态管理

前言

上一篇我们介绍了 Redux 在Flutter 中的基本概念和简单示例，看起来好像也没有那么复杂。但是这些操作都是同步的，点击按钮、发起 Action 调度、然后更新状态、最后更新界面是连贯的。那如果有一个异步请求怎么办，也就是我们可能是点击一个按钮发起的并不是 Action，而是异步网络请求，这个时候又如何通知更新状态？通常来说，在这种场景里我们需要发起三个 Action：

• 网络加载提示：界面通知用户当前正在请求数据，请等待，通常是一个Loading 提示。
• 网络请求成功：接收到后端数据，然后通知界面以最新状态的数据刷新界面。
• 网络请求失败：界面通知用户请求失败，通常是一个错误提示。

这个时候通过按钮点击回调肯定没法完成这样的操作，这个时候就需要利用到 Redux 的中间件了。本篇我们以联系人列表为例，来讲述如何使用中间件完成异步网络请求。

准备工作

1. 首先请更新最新的后端代码：后端代码（基于 Express.js），更新后在目录下运行 node seedContactor.js 产生数据库 Mock 数据，注意图片这里使用的是本机的附件地址，在后端项目的public/upload/image 下面，如果需要展示联系人头像的自己可以找一张图片，然后修改一下