Async with ReduxRedux 中的异步操作

欢迎观看本视频！观看完后，您将能够：

• 解释同步操作与异步操作之间的区别
• 解释在 Redux 中处理异步操作时遇到的挑战
• 提供异步操作可能带来的复杂问题的例子
• 介绍如何使用 Thunk 和 Saga 处理异步操作
• 对比 Thunk 和 Saga 的优缺点

---

同步与异步操作的区别

同步操作（Synchronous Operations）

同步操作意味着两个操作必须按顺序执行，即 第一个操作完成后，第二个操作才能开始。如果您有两个操作，第一个操作开始时会阻塞第二个操作，直到第一个操作完成。

异步操作（Asynchronous Operations）

异步操作则是并行执行的，这意味着 第二个操作 可以在第一个操作还在处理时就开始执行。异步操作允许后台运行多个任务，而不会影响用户继续使用应用程序。

---

何时使用异步操作？

通常，在以下场景下，我们会选择使用异步操作：

• 网络请求（如获取数据）
• 内存密集型计算
• 加载大型文件

这些操作可以在后台进行，而用户可以继续执行其他任务，从而提升用户体验。

---

异步操作可能带来的问题

尽管异步操作非常有用，但它们也可能带来一些挑战。例如：

假设用户想向购物车中添加两个商品，过程是：

1. 用户先输入商品数量
2. 然后点击 “加入购物车” 按钮以更新购物车

如果 “加入购物车” 按钮事件在 商品数量更新之前 触发，可能会导致添加错误的商品数量。

这种情况下，我们更倾向于使用异步操作。

---

Redux 与异步操作

Redux 状态管理

Redux 的状态管理依赖 同步操作。以下是 Redux 状态变化的典型流程：

1. 调用 Action Creator 函数，返回 Action 对象
2. 将 Action 对象 派发到 Store
3. Store 根据 Action 的 type 属性调用相应的 Reducer
4. Reducer 更新状态对象

---

处理异步操作的挑战

在一些情况下，Action 和 Reducer 本身无法处理异步操作。例如：

• 如果需要从服务器获取数据，同步行为 会阻塞用户与应用程序的交互，直到数据返回，这可能导致糟糕的用户体验。
  

为了解决这个问题，Redux 引入了 Middleware（中间件），允许与异步数据进行交互。中间件可以拦截 Action，延迟其执行，从而保持同步行为。异步操作完成后，Redux 流程将继续执行，最终通过 Reducer 更新状态。

---

异步操作的两种中间件：Thunk 和 Saga

Thunk Middleware

Thunk 是 Redux 中处理异步操作的常见中间件。在使用 Thunk 时，Action Creators 返回的是一个 函数，而不是一个普通的 Action 对象。这个函数可以执行异步操作（如 API 调用），也可以执行同步操作。

Thunk 的优缺点：

• 优点：
  • 适用于简单应用，学习曲线较平缓
  • 可以处理同步和异步操作
• 缺点：
  • 处理 并发问题 需要小心
  • 当应用程序变得复杂时，Thunk 的 扩展性 较差
    

Redux Saga Middleware

Redux Saga 使用 ES6 引入的 生成器函数（Generators）。生成器函数被称为 Sagas，它们可以封装异步操作的逻辑，支持在执行过程中 暂停和恢复，从而实现多任务处理。

Saga 的优缺点：

• 优点：
  • 处理多任务，可以与 Redux store 的派发过程并行操作
  • 便于测试和调试，支持时间旅行和复杂的流日志
  • 良好的扩展性，适合大型应用
• 缺点：
  • 学习曲线较陡，需要深入理解生成器函数
    

---

Thunk 和 Saga 对比总结

---

总结

在本视频中，您学习了以下内容：

• 同步操作 阻塞后续操作，直到前一个操作完成；异步操作 可以并行执行。
• Redux 的状态管理需要 同步行为，但异步操作是必要的，尤其是在进行 网络请求 或 内存密集型计算 时。
• Thunk 和 Saga 是常用的 Redux 中间件，分别适用于不同的应用场景。
• Thunk 简单易学，但在处理并发和扩展性上有所限制。
• Saga 提供了强大的多任务处理能力和调试支持，但学习难度较高。