redux 异步

最新推荐文章于 2025-10-16 14:27:00 发布

原创最新推荐文章于 2025-10-16 14:27:00 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

React 同时被 2 个专栏收录

21 篇文章

订阅专栏

Redux

11 篇文章

订阅专栏

本文深入探讨了在Redux框架中处理异步Action的方法，包括如何使用Redux中间件如redux-thunk、redux-promise和redux-saga来实现异步请求，解决同步Action在处理异步操作时的局限性。

在 Redux 的世界中，Redux action 返回一个 JS 对象，被 Reducer 接收处理后返回新的 State，这一切看似十分美好。整个过程可以看作是：

view -> actionCreator -> action -> reducer -> newState ->(map) container component

但是真实业务开发我们需要处理异步请求，比如：请求后台数据，延迟执行某个效果，setTimout, setInterval 等等，我们希望在异步请求的时候，action 能够这样处理：

view -> asyncAction -> wait -> action -> reducer -> newState -> container component

这里 action 不再是同步的，而是具有异步功能，当然因为依赖于异步 IO，也会产生副作用。这里就会存在一个问题，我们需要发起两次 action 请求，这好像我们又得将 dispatch 对象传入函数中，显得不够优雅。同步和异步的调用方式截然不同：

同步情况：store.dispatch(actionCreator())
异步情况: asyncAction(store.dispatch)

好在我们有 Redux 中间件机制能够帮助我们处理异步 action，让 action 不再仅仅处理同步的请求。

除了可以自己造轮子，也可以借用别人的智慧，比较适合处理异步请求的redux中间件有

redux-thunk
redux-promise
redux-saga

参考

https://juejin.im/entry/59fd15b951882534af2552af

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不止三岁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Redux 异步操作指南：使用 redux-thunk 和 redux-saga

笔记、经验、日常分享

04-09

881

Redux 本身是不支持异步操作的，但是可以通过中间件来实现异步任务。最常用的中间件就是 redux-thunk 和 redux-saga。

Redux 异步数据管理

青蛙king的博客

03-01

1279

前言 redux 只处理同步数据流，异步数据流交给 “中间件” 处理。 redux 中间件经历了三次发展： redux-thunk redux-promise redux-saga 一、中间件的概念 “中间件的概念”引自阮一峰老师的博客《Redux 入门教程（二）：中间件与异步操作》，欲进一步学习请自行加餐阮老师准备的盛宴。为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担.

参与评论您还未登录，请先登录后发表或查看评论

Redux异步

AMD23的博客

03-21

915

通常情况下，action只是一个对象，不能包含异步操作，这导致了很多创建action的逻辑只能写在组件中，代码量较多也不便于复用，同时对该部分代码测试的时候也比较困难，组件的业务逻辑也不清晰，使用中间件了之后，可以通过actionCreator异步编写action，这样代码就会拆分到actionCreator中，可维护性大大提高，可以方便于测试、复用，同时actionCreator还集成了异步操作中不同的action派发机制，减少编码过程中的代码量常见的异步库： Redux-thunk ✅✅✅✅

菜鸟进阶：Redux异步操作全解析（实战避坑指南）

10-16

1046

Redux 天生是个慢性子。它只认识一种动作：纯对象（plain object）。你给它一个，它啪地一下就把牛奶塞进购物车。可一旦你想说“先等我发个请求，回来再决定买不买”，Redux 就一脸懵逼： “请求？异步？对不起，我只认识同步对象，Promise 这种花里胡哨的玩意儿请出门左转。”于是你愤怒地拍桌子：“老子只是想 dispatch 一个 axios 返回的 Promise，Redux 居然给我报错？” ——对，这就是 Redux 的“直男”本性：同步是真爱，异步是意外。Redux 的 red

redux 异步操作

天天的博客

07-09

475

异步redux

weixin_42262889的博客

06-19

229

Action：当调用异步API时，有两个非常关键的时刻：发起请求的时刻，和接收到响应的时刻（也可能超时）这两个时刻都可能会更改应用的state，为此，你需要dispatch普通的同步到action，一个情况下，每个API都需要dispatch至少三种action 使用store时 const store = createStore(rootReducer) 异步数据流：默认情况下，crea...

Redux异步操作

ngdlbq的博客

11-11

537

在学习 Redux 的过程中,中间件困扰了我很久.难点主要是概念太多，接触的词太多，而且网上的案例看的头都疼，很容易晕，已经晕了好多次了。后来通过看别人的文章并不断总结，终于搞懂了，哈哈！今天大致讲下我对中间件的理解,希望能够帮助到跟我一样的 redux 的初学者.先来一张图先，大概介绍一下redux的异步流程：首先通过 ActionCreator 生成一个 action, 流过中间件,然后交由

详解redux异步操作实践

12-11

总结来说，Redux异步操作实践涵盖了从基本的`redux-thunk`处理到高级的`redux-saga`监听和`redux-request-async-middleware`的规范化请求管理。理解并掌握这些工具和技术，能够帮助开发者更有效地组织和管理React...

Redux异步解决方案之Redux-Thunk原理及源码解析.docx

10-26

在现代前端开发中，尤其是在使用Redux进行状态管理时，经常会遇到需要处理异步操作的情况。这些操作可能包括发送网络请求、设置定时器等。然而，Redux的核心设计原则是行动（Action）必须是同步的并且返回一个纯对象...

使用Redux处理异步

song854601134的博客

08-10

2566

突然出现不能体现它的简化后的好处。要实现redux应用的完全体就少不了要创建redux的store等这些前期的配置工作。使用了react-redux的hooks呢，画风一转。这是使用了redux toolkit的好处。react-redux的connect方法也省去了。在一般的开发中需要处理很多的网络请求，缓存读写等情况。在使用的时候和前文提到的slice的套路基本一致。首先，也是最重要的一点。在新的实现中这些都在slice文件中，方便统一的管理。redux主要解决的问题是统一来源的状态管理。...

Redux中的异步操作处理

07-18

1114

异步操作是Redux应用中常见的挑战，但通过使用中间件如Thunk和Saga，我们可以有效地管理和控制异步流程，保持状态的一致性和程序的健壮性。作为前端开发者，理解并熟练运用这些技术，将大大提升你的开发效率和应用程序的质量。记住，优秀的代码不仅仅是功能上的实现，更是对细节的把握和对最佳实践的遵循。在你的项目中尝试并优化这些技术，你将能构建出更加稳定和高效的前端应用。欢迎来到我的博客，很高兴能够在这里和您见面！

redux是如何进行异步的

m0_71955188的博客

06-28

1097

redux Thunk：通过npm add redux-thunk安装redux-thunk库，在store中，创建store时候、引入applyMiddware方法来使用resux-thunk在组件使用异步actionredux Saga：通过npm add redux-Saga安装组件redux-saga库，拆件一个saga文件用于处理异步操作，在创建store时候将saga作为中间件应用，创建对一个的action，在组件中使用异步的action。

Redux 中处理异步状态操作

qq_40595376的博客

10-09

531

使用 Redux Thunk 可以方便地在 Redux 中处理异步状态操作。通过创建异步 action creator，你可以在应用中管理异步逻辑，并在需要时更新状态。对于更复杂的需求，可以考虑使用 Redux Saga。在这里插入图片描述。

详解 redux 中的异步处理

Baron的技术blog

03-09

2903

主要通过applyMiddleware函数，借助redux中间件来处理，即通过中间件模式将原始dispatch函数进行封装处理，形成洋葱模型，将原始dispatch函数作为参数传递，在处理异步事件时，再调用原始dispatch函数修改数据状态。 redux中的异步处理流程通常如下：在异步操作开始前，发送action，用来表示要发起异步操作，用户界面应该有所提示在异步操作结束后，发送action，用来表示异步操作结束，根据异步操作的结果，对store中的数据和用户界面进行更新 redux中通常使用.

Redux 异步数据流初探

AI天才研究院

11-15

8884

Redux 简介用React写的项目中各组件的状态依赖关系非常复杂，为了便于管理组件的状态，使用 Redux。组件化是react最擅长的方面，但是在实际开发中，随着应用复杂度地不断提升，组件之间的状态通信变得越来越多，组件之间的耦合也变得越来越重。这时，Redux诞生了。 Redux对所有“组件”说：你们不要在一对一地写信通知状态了，我是你们的 ...

redux异步应用的理解

lixiaonaaa的博客

02-20

276

之前写过一篇博客是关于redux-saga的使用，用于解决异步问题，这篇博客想要补充一下对redux异步的理解。 1，同步和异步的区别 1）同步action，就是指action的值为Object类型的一般对象 export const createIncrementAction = data => ({type:INCREMENT,data}) 2）异步action，就是指action的值为函数,异步action中一般都会调用同步action。（异步action不是必须要用的）。 exp

redux（四）用redux-thunk和redux中间件发送异步action

luck_lin

05-06

834

cnpm i redux-thunk，然后在store文件中引入，同时解构出redux的applyMiddleware，将thunk传入中间件，将中间件传入store：import {createStore, applyMiddleware} from 'redux'; import reducer from "./reducer";//引入当前目录下合并后的rreducer import th...

Redux中进行异步操作(网络请求)的方案

热门推荐

m0_71485750的博客

10-12

1万+

我们可以直接通过同步的操作来dispatch action，state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。

React-Redux 异步验证

qq_32180959的博客

02-06

596

下面是简单的一个验证页面，我们需要做的就是在选择一个类目后，去判断数据库中该类目下是否有相同的值。同步验证 validate .js里面可以验证基本的是否为空，字符长短，正则等，异步 asyncValidate.js用于跑后端去从数据库进行验证（注意：不要害怕，异步验证会不会验证没结束，直接点了保存就提交了。答案是肯定不会的，所有的保存或点击进入下一个页面，都会先进行异步验证，异步验证

redux异步操作

06-06

### Redux 中的异步操作与中间件实现在 Redux 中，状态管理是同步的，因此需要借助中间件来处理异步操作。以下是几种常见的异步操作中间件及其实现方式： #### 1. Redux Thunk Redux Thunk 是最简单且常用的中间件之一，它允许 Action Creator 返回一个函数而不是一个普通的对象。这个函数接收 `dispatch` 和 `getState` 作为参数，从而可以在异步逻辑完成后手动调用 `dispatch`[^2]。 ```javascript // 安装 redux-thunk import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk)); // 使用 Thunk 的异步 Action function fetchUser() { return function(dispatch) { dispatch({ type: 'FETCH_USER_REQUEST' }); return fetch('https://api.example.com/user') .then(response => response.json()) .then(user => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user })) .catch(error => dispatch({ type: 'FETCH_USER_FAILURE', payload: error })); }; } ``` #### 2. Redux Saga Redux Saga 是一种更强大的解决方案，使用 Generator 函数来处理复杂的异步流程。它可以轻松管理并发、取消和错误处理等场景[^1]。 ```javascript // 安装 redux-saga import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(reducer, applyMiddleware(sagaMiddleware)); // 使用 Saga 的异步任务 function* fetchUser(action) { try { const user = yield call(fetch, 'https://api.example.com/user'); const data = yield user.json(); yield put({ type: 'FETCH_USER_SUCCESS', payload: data }); } catch (error) { yield put({ type: 'FETCH_USER_FAILURE', payload: error }); } } function* watchFetchUser() { yield takeEvery('FETCH_USER_REQUEST', fetchUser); } sagaMiddleware.run(watchFetchUser); ``` #### 3. Redux Observable Redux Observable 使用 RxJS 来处理异步操作，适合熟悉响应式编程的开发者。它通过定义 Epics 来监听 Actions 并返回新的 Actions[^3]。 ```javascript // 安装 redux-observable 和 rxjs import { createAction, handleActions } from 'redux-actions'; import { ofType } from 'redux-observable'; import { mergeMap, catchError, map } from 'rxjs/operators'; import { of } from 'rxjs'; const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST'; const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS'; const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE'; const fetchUserEpic = action$ => action$.pipe( ofType(FETCH_USER_REQUEST), mergeMap(() => fetch('https://api.example.com/user') .then(response => response.json()) .then(user => ({ type: FETCH_USER_SUCCESS, payload: user })) .catch(error => ({ type: FETCH_USER_FAILURE, payload: error })) ) ); ``` #### 最佳实践选择 - 如果项目需求简单，推荐使用 Redux Thunk，因为它易于理解和实现。 - 对于复杂的应用场景或需要精确控制异步流的情况，Redux Saga 是更好的选择。 - 如果团队已经熟悉 RxJS，可以考虑 Redux Observable。 ### 总结 Redux 异步操作的最佳实践取决于项目的复杂度和开发团队的技术栈。Redux Thunk 提供了轻量级的解决方案，而 Redux Saga 则适合更复杂的场景[^1]。