Redux 异步解决方案--redux(2)

Q:为什么我们无法直接进行数据请求?

Redux store 对异步逻辑一无所知。它只知道如何同步 dispatch action,通过调用 root reducer 函数更新状态,并通知 UI 某些事情发生了变化。任何异步都必须发生在 store 之外。但是,如果你希望通过调度或检查当前 store 状态来使异步逻辑与 store 交互,该怎么办?

A:使用中间件

Redux middleware 扩展了 store,允许我们

  1. dispatch action时执行额外的逻辑
  2. 暂停、修改、延迟、替换或停止 dispatchaction
  3. 编写可以访问dispatchgetState的额外代码
  4. 在使用中间件之前,dispatchaction只能是对象,在使用中间件之后,dispatchaction可以是函数也可以是promise

我们常用的处理异步的中间件是redux-thunk

为什么是 redux-thunk

他仅仅是让dispath多支持了一种类型,就是函数类型,在使用Redux-Thunk前我们dispatchaction必须是一个纯对象(plain object),使用了Redux-Thunk后,dispatch可以支持函数,这个函数会传入dispatch本身作为参数。

一些对比:

  • Thunks 最适合复杂的同步逻辑(尤其是需要访问整个 Redux store state 的代码)和简单的异步逻辑(如基本的 AJAX 调用)。通过使用 async/await,将 thunk 用于一些更复杂的基于 Promise 的逻辑也是合理的。
  • Sagas 最适合复杂的异步逻辑和解耦的 "background thread" 类型的行为,特别是如果你需要监听已 dispatch 过的 action(这是 thunk 无法完成的事情)。需要熟悉 ES6 生成器函数和 redux-saga 的 "effects" 运算符。
  • Observables 解决了与 sagas 相同的问题,但依赖 RxJS 来实现异步行为。需要熟悉 RxJS API。

增加 redux-thunk 之后的数据流

一些 Demo

  1. 在没有使用Redux-thunk的时候
JavaScript 复制代码
function increment() {
  return {
    type: 'INCREMENT'
  }
};

store.dispatch(increment());
  1. 在使用Redux-thunk之后
JavaScript 复制代码
function increment() {
  return {
    type: 'INCREMENT'
  }
};

// 异步action creator
function incrementAsync() {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  }
}

// 使用了Redux-Thunk后dispatch不仅仅可以发出plain object,还可以发出这个异步的函数
store.dispatch(incrementAsync());

不用 Redux-thunk 是否解决问题?

如果你想用JS处理一个延时任务,直接用setTimeout就好了,即使你使用了Redux也没啥区别。Redux确实提供了另一种处理异步任务的机制,但是你应该用它来解决你很多重复代码的问题。如果你没有太多重复代码,使用语言原生方案其实是最简单的方案。

JS 复制代码
store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

关于这个问题,这里有更为详细的解答:异步方案对比

那么这就是本篇文章的全部内容啦~

相关推荐
我爱加班、、10 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉15 分钟前
vue快速上手
前端·javascript·vue.js
b1gbrother38 分钟前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427111 小时前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny1 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛1 小时前
前端导出excel表格并修改导出表格样式
前端
风舞1 小时前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办1 小时前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童1 小时前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端