首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我需要等待一个异步Redux Thunk (不是Promise)吗?

在Redux中,Redux Thunk是一个中间件,用于处理异步操作。它允许我们在Redux中编写异步的action creator,并且可以在action creator中返回一个函数而不仅仅是一个普通的action对象。

当我们需要等待一个异步Redux Thunk时,我们可以使用Redux提供的一些方法来处理。首先,我们需要在应用程序中安装Redux Thunk中间件。然后,在创建store时,将Redux Thunk中间件作为参数传递给createStore函数。

接下来,我们可以编写一个异步的action creator,它返回一个函数。这个函数可以在内部执行异步操作,例如发送网络请求或访问数据库。在异步操作完成后,我们可以使用dispatch函数来分发一个普通的action对象,以更新Redux store中的状态。

以下是一个示例代码:

代码语言:txt
复制
// 安装Redux Thunk中间件
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// 创建store并应用Redux Thunk中间件
const store = createStore(reducer, applyMiddleware(thunk));

// 异步action creator
const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    // 执行异步操作
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

// 调用异步action creator
store.dispatch(fetchData());

在上面的示例中,fetchData是一个异步的action creator,它返回一个函数。这个函数接受dispatch作为参数,可以在内部执行异步操作。在异步操作完成后,我们使用dispatch函数分发不同的action来更新Redux store中的状态。

需要注意的是,Redux Thunk并不是唯一处理异步操作的方式。我们还可以使用其他中间件或库,如Redux Saga或Redux Observable。这些工具提供了更强大和灵活的异步操作处理能力。

关于Redux Thunk的更多信息和使用示例,你可以参考腾讯云的相关文档和产品介绍:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Redux原理分析以及使用详解(TS && JS)

从简单的 react-thunkredux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题的方案 4.1 、redux-thunk redux-thunk...尽管redux-thunk很简单,而且也很实用,但人总是有追求的,都追求着使用更加优雅的方法来实现redux异步流的控制,这就有了redux- promise。...4.2、redux-promise 使用redux-promise中间件,允许action是一个promise,在promise中,如果要触发action,则通过调用resolve来触发 4.3、redux-sage...大家觉得能如愿在第一次加载的时候能拿到数据?...,但是,这整个Action方法,返回的是一个async,async其实本质也就是promise对象,那么又是一个异步对象,所以它的外部不会等待,当代码执行到await这块, 因为需要时间来调用接口,所以会跳出去

4.3K30

Redux异步解决方案 1. Redux-Thunk中间件

简单介绍一下thunk,这是一个中间件,是解决redux异步问题产生的。...我们都知道,在使用redux的时候,通过dispatch一个action 发生到reducer 然后传递给store修改状态 一系列都是同步的,那如果说dispatch一个action 这个action...redux比较常用的中间件有 redux-saga、redux-thunkredux-promise等 都是为了解决dispatch action异步处理问题 redux中间件 对redux应用实现异步...可以将 thunk 看做 store 的 dispatch() 方法的封装器;我们可以使用 thunk action creator 派遣函数或 Promise,而不是返回 action 对象。...但是如果想在dispath -> action里面执行异步操作 就需要thunk 注意,没有 thunk 的话,默认地是同步派遣。

1.3K20
  • React:Redux怎么处理异步

    异步逻辑应放置在 Redux中间件中处理 !! Middleware !! (就是下面要提到的redux-thunkredux-promise) ?...dispatch 一个 thunk函数; redux-thunk 中间件允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理; 感受一波redux-thunk的精炼 ?...总结: redux-thunk 允许我们 dispatch 一个包含异步处理逻辑函数(thunk);优点是我们可以借助这种简单的机制在 redux 中处理异步逻辑;缺点是这会让 action 变的不纯粹...((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数; redux-promise: store.dispatch...: store.dispatch((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数; redux-promise

    2.7K30

    react知识总结_六年级教学工作总结个人

    大家好,又见面了,是你们的朋友全栈君。 简介 这次要总结的是对 store 和 reducer 的拓展,比如发送异步的 action 操作,还有一个就是对多个 reducer 的管理。...,另一个是 getState ,然后在里面进行异步操作,这里设置了 2秒 然后添加了一个用户,点击之后,过了 2秒 的用户才会被添加进去,而页面也是等到 2秒 后重新渲染。...这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。...redux-promise import thunk from 'redux-thunk'; import { createLogger } from 'redux-logger'; import...logger) // 按照严格的循序 ); 上一种方法是使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用

    66120

    一个 redux-thunk 轮子

    redux-thunk 不就是那个只有 14 行代码的轮子嘛?一行就能写出来还要你来教我做事? 不错,redux-thunk一个非常小的库,不到 5 分钟就能理解并造出来。...解耦 上面的代码在很多业务里非常常见,常见到我们根本不需要什么 redux-thunkredux-saga 来处理。...,就叫做 redux-thunk 总结 最后来回答一些redux 社区里看到的一些问题。...不行,也要自己编 pattern,把 Promise 改成 generator:dispatch(actionGenerator) 不就又一个 pattern 了,但是这个已经被 redux-saga...需要注意的是,redux-thunk 和后面两者其实并不是一个等级的库,后面两都除了提供 pattern 的 “翻译” 功能之外还有很多如 error handling 这样的特性,这里不展开说了。

    74730

    单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

    比如 redux-thunkredux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题的。...**redux-thunkredux-promise 刚好就是代表这两个面。 当业务逻辑多且复杂的时候会发生什么情况呢?...为了解决分布式系统中的LLT(Long Lived Transaction-长时运行事务的数据一致性)问题而提出的一个概念。比如网上购物下单后,需要等待付款才最终确定。...redux-saga的优势 Redux 处理异步的中间件 redux-thunkredux-promise,当然 redux异步中间件还有很多,他们可以处理大部分场景,这些中间件的思想基本上都是把异步请求部分放在了...而VUEX即不需要使用外层组件,也不需要类似connect方式将组件做一次包装,认为出发点应该是可能是为了避免啰嗦。

    3.7K40

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

    本文会讲解Redux官方实现的异步解决方案----Redux-Thunk,我们还是会从基本的用法入手,再到原理解析,然后自己手写一个Redux-Thunk来替换它,也就是源码解析。...这就是我们为什么需要找到一个“合法”的方法给辅助方法提供dispatch参数,并且帮助Redux区分出哪些是异步的action creator,好特殊处理他们。...之前就告诉过你:只要使用了Redux Thunk,如果你想dispatch一个函数,而不是一个纯对象,这个中间件会自己帮你调用这个函数,而且会将dispatch作为第一个参数传进去。...你可能会发现很多例子都返回了Promise,这个不是必须的,但是用起来却很方便。Redux并不关心你的thunk返回了什么值,但是他会将这个值通过外层的dispatch()返回给你。...这是因为thunk提供的dispatch也可以接收thunk,所以你可以一直嵌套的dispatch thunk。而且结合Promise的话可以更好的控制异步流程。

    3.6K51

    【JS】285- 拆解 JavaScript 中的异步模式

    而这里的「另外一个函数」也有一个常见的名字,Hight order function 高阶函数。 需要澄清的一点是,Callback 并非都是异步执行的。...提到 thunk,你可能马上就会想到 redux-thunk,其对自己的定义如下: Redux Thunk middleware allows you to write action creators...异步 thunk 也是一种你无需你传入任何参数就可以正常工作的函数,如果你想获取其中的值,则需要传入一个回调函数。...,不过如果我们仔细想想就能发现 thunk 把时间的概念抽象出去的,执行 thunk 函数后,我们只需要等待结果就行,无需去关心 addAsync 是什么,做了什么事情,需要花费多少时间。...异步 thunk 让时间不再是问题,如果我们换个角度看 ,它就好似是给一个未来的值添加了展位符。有没有觉得这种说法似曾相识,没错,Promise 也是如此。

    82121

    【JS】336- 拆解 JavaScript 中的异步模式

    而这里的「另外一个函数」也有一个常见的名字,Hight order function 高阶函数。 需要澄清的一点是,Callback 并非都是异步执行的。...提到 thunk,你可能马上就会想到 redux-thunk,其对自己的定义如下: Redux Thunk middleware allows you to write action creators...异步 thunk 也是一种你无需你传入任何参数就可以正常工作的函数,如果你想获取其中的值,则需要传入一个回调函数。...,不过如果我们仔细想想就能发现 thunk 把时间的概念抽象出去的,执行 thunk 函数后,我们只需要等待结果就行,无需去关心 addAsync 是什么,做了什么事情,需要花费多少时间。...异步 thunk 让时间不再是问题,如果我们换个角度看 ,它就好似是给一个未来的值添加了展位符。有没有觉得这种说法似曾相识,没错,Promise 也是如此。

    81230

    Redux 入门教程(二):中间件与异步操作

    上一篇文章,介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染。 但是,一个关键问题没有解决:异步操作怎么办?...五、redux-thunk 中间件 异步操作至少要送出两个 Action:用户触发第一个 Action,这个跟同步操作一样,没有问题;如何才能在操作结束时,系统自动送出第二个 Action 呢?...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用redux-thunk中间件改造store.dispatch。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用redux-promise中间件。...注意,createAction的第二个参数必须是一个 Promise 对象。 看一下redux-promise的源码,就会明白它内部是怎么操作的。

    1.4K40

    Redux:从action到saga

    但是当需要处理异步的action(在函数式编程里称为副作用)的时候事情就没有这么简单了。为了解决这个问题,redux建议使用中间件(尤其是thunk)。...基本上,如果你需要出发副作用(side effects),使用一种特定的action生成方法:一种返回一个方法的方法,可以实现任意的异步访问并分发任意你想要的action。...这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式(超时,API调用等等。。)...所以不用再用redux-thunk中间件来写,我们用saga来发出action并yield副作用。这样不复杂?action creator这样的写法不是更简单?虽然看起来是这样的,但是NO!...在上面的例子中用了两种副作用: 一个put副作用,它会给redux store分发一个action。 一个call副作用,它会执行一个异步的方法(promise,cps后者其他的saga)。

    1.2K00

    从应用到源码-深入浅出Redux

    需要额外注意的是,在 redux 中要求每个 reducer 函数中匹配到对应的 action 时需要返回一个全新的对象(两个对象拥有完全不同的内存空间地址)。...可是,假使我们需要在 store 中处理派发一些异步 Action 又该怎么办呢?显然上述的过程完全是一个同步的过程。...比如刚才的场景下,某些业务场景下我们需要派发一个异步 Action ,此时我们需要支持传入的 action 是一个函数,这样在函数内部可以自由的进行异步派发 action : import { createStore...上边我们按照步骤实现了一个简单的 Redux-Thunk 中间件,它支持我们传入的 action 类型为一个函数。此时我们就可以在 Redux 中完美的使用异步 Action 。...所谓 compose 其实和 Redux 关系并不是很大,只是 Redux 中利用了这个方法来方便的组合中间件而已。

    1.3K10

    一文梭穿Vuex、Flux、ReduxRedux-saga、Dva、MobX

    显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成的支持异步处理的中间件。比如 redux-thunkredux-promise 。...redux-thunkredux-promise 刚好就是代表这两个面。 redux-thunkredux-promise 的具体使用就不介绍了,这里只聊一下大概的思路。...大部分简单的异步业务场景,redux-thunk 或者 redux-promise 都可以满足了。 上面说的 Flux 和 Redux,和具体的前端框架没有什么关系,只是思想和约定层面。...刚才介绍了两个Redux 处理异步的中间件 redux-thunkredux-promise,当然 redux异步中间件还有很多,他们可以处理大部分场景,这些中间件的思想基本上都是把异步请求部分放在了...* 很容易测试,如果是 thunkPromise,测试的话就需要不停的 mock 不同的数据。

    5.5K10

    redux-thunk 中间件的示例

    redux-thunk 简介 Redux处理异步任务——异步数据流中间件:redux-thunk & action是一个函数,函数内部处理异步任务 注意:默认情况下,redux自身只会处理同步数据流。...但是,如果涉及到异步操作,就应该使用 redux-thunk 这种的中间件,来处理异步数据流!!!...使用了redux-thunk中间件以后,我们需要修改action redux-thunk的使用 安装 ,引入 npm install redux-thunk // 下载两个中间件, redux-thunk...thunk的action写法 // 创建action所需要数据 export function userLoginAction(userInput) { //可以在这里进行异步处理 return...(dispatch)=>{ // 在此处,就可以处理异步操作了 // 也就是,异步代码就可以放在此处执行了 return new Promise((resolve

    55720

    状态管理的概念,都是纸老虎

    显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成的支持异步处理的中间件。比如 redux-thunkredux-promise 。...redux-thunkredux-promise 刚好就是代表这两个面。 redux-thunkredux-promise 的具体使用就不介绍了,这里只聊一下大概的思路。...大部分简单的异步业务场景,redux-thunk 或者 redux-promise 都可以满足了。 上面说的 Flux 和 Redux,和具体的前端框架没有什么关系,只是思想和约定层面。...刚才介绍了两个Redux 处理异步的中间件 redux-thunkredux-promise,当然 redux异步中间件还有很多,他们可以处理大部分场景,这些中间件的思想基本上都是把异步请求部分放在了...* 很容易测试,如果是 thunkPromise,测试的话就需要不停的 mock 不同的数据。

    5.3K20

    每日两题 T35

    看过dva源码redux redux是 JavaScript 状态容器,提供可预测化的状态管理。 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。...redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的 library,它的目标是让副作用管理更容易,执行更高效,测试更简单...(有点像 async/await,但 Generator 还有一些更棒而且我们也需要的功能)。 你可能已经用了 redux-thunk 来处理数据的读取。...不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态的值,比较灵活,易于控制 •redux-promise的优点是

    77530

    Rematch: Redux 的重新设计

    难道现在状态管理不是一个可以解决的问题?直观地说,开发人员似乎知道一个隐藏的事实:状态管理的使用似乎比需要的更困难。...1.初始化 让我们来看看一个基本的 Redux 初始化过程,如下图左边所示: 许多开发人员在第一步后就在这里暂停,茫然地盯着深渊。 什么是 thunk?compose?一个函数能做到这些?...3.使用 Async/Await 代替 Thunks thunk 通常用于在 Redux 中创建异步 action。...在许多方面,thunk 的工作方式看起来更像是一个聪明的黑客,而不是官方推荐的解决方案。...一个简单的 action 到底是作为一个动态类型的对象、一个函数,还是一个 Promise?这难道不是一种拙劣的实践? 如上图右边所示,难道我们就不能只使用 async/await ? 4.

    1.6K50
    领券