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

如何在redux操作调度调用中返回promise,以便可以链接.then块?

在Redux操作调度调用中返回Promise以便可以链接.then块,可以通过使用中间件来实现。Redux中间件是一个函数,它可以在action被发起之后,到达reducer之前进行拦截和处理。

要在Redux操作调度调用中返回Promise,可以使用redux-thunk中间件。redux-thunk允许我们在action创建函数中返回一个函数而不是一个普通的action对象。这个返回的函数可以接收dispatch和getState作为参数,并且可以在内部进行异步操作。

以下是实现的步骤:

  1. 安装redux-thunk中间件:
代码语言:txt
复制
npm install redux-thunk
  1. 在创建store时应用redux-thunk中间件:
代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));
  1. 创建一个异步的action创建函数,该函数返回一个函数:
代码语言:txt
复制
export const fetchData = () => {
  return (dispatch, getState) => {
    return new Promise((resolve, reject) => {
      // 异步操作,例如发起网络请求
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          // 在异步操作完成后,可以dispatch一个普通的action对象
          dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
          resolve(data); // 可选,如果需要在调用处使用.then块
        })
        .catch(error => {
          dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
          reject(error); // 可选,如果需要在调用处使用.catch块
        });
    });
  };
};

在上述代码中,fetchData是一个异步的action创建函数,它返回一个函数。这个返回的函数接收dispatch和getState作为参数,可以在内部进行异步操作。在异步操作完成后,可以dispatch一个普通的action对象来更新Redux的状态。

  1. 在组件中调用异步的action创建函数,并使用.then块处理返回的Promise:
代码语言:txt
复制
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchData())
      .then(data => {
        // 处理异步操作成功的情况
        console.log(data);
      })
      .catch(error => {
        // 处理异步操作失败的情况
        console.error(error);
      });
  }, []);

  return (
    // 组件的JSX代码
  );
};

export default MyComponent;

在上述代码中,我们使用了React Redux的useDispatch钩子来获取dispatch函数,并在组件的useEffect钩子中调用异步的action创建函数fetchData。通过使用.then块和.catch块,我们可以处理异步操作成功和失败的情况。

这样,我们就可以在Redux操作调度调用中返回Promise,并且可以使用.then块和.catch块来处理异步操作的结果。

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

相关·内容

「React 基础」在 React 项目中使用 ES6,你需要了解这些

目前主流的应用站点,为了构建丰富的交互,我们需要不断的操作网页的DOM元素。...随着操作越来越多,就会严重影响站点应用的性能,为了解决这个问题,React 引入了虚拟DOM(DOM directly) 这项技术,将这些操作变化放到内存中进行运算,有结果了在一次性返回进行 DOM 的渲染...let 和 const 的用法 1、在ES6,官方推荐使用 let 和 const 声明变量,你可以使用let声明级的作用域,使用 const 来定义常量。...在 React 项目中,我们可以将一个值很容易的添加到另外一个数组,类似push方法,例如我们有一个待办事项的列表,我们需要添加一个新的待办事项,我们需要调用 setState 方法来添加新的待办事项内容...这个方法主要在 React Redux 场景中进行运用,每次创建一个Immutable对象,将新的 state 返回给 Reducer。(在后续的文章里将会介绍到 Redux) ?

3.1K30

剥开比原看代码13:比原是如何通过list-balances显示帐户余额的?

为了方便理解,我们先把一些细节代码注释掉了,只留下了骨架,并且标注了6内容: 第1处需要关注的是,这是一个函数,可以被外界调用,所以前面才可以baseListActions('balance'),传进来的第一个参数是用来表示这是什么类型的数据...里到底有哪些routes,比如是否需要“新建”,“显示”等等 第3处就是返回值,返回了一个对象,它是可以redux-router理解的。...可以看到它里面有path, 对应的组件component,甚至首页某些特别时刻进入或者改变时,要进行什么操作。...这里还剩下一点,就是从后台拿到数据后,前端怎么处理,也就是前面第1和第3拿到数据后的操作。...UTXO,然后返回调用者继续处理。

1.7K10
  • redux-saga

    作为一个Redux中间件,想让Redux应用的副作用(即依赖/影响外部环境的不纯的部分)处理起来更优雅 二.设计理念 Saga像个独立线程一样,专门负责处理副作用,多个Saga可以串行/并行组合起来,...,例如把[Effect1, Effect2]转换为并行调用 类似于装箱(把业务操作用Effect包起来)拆箱(执行Effect里的业务操作),此外,完整的redux-saga还要实现: 作为middleware...Effect层存在的主要意义是为了易测试性,所以用简单的描述对象来表示操作,多这样一层指令 虽然可以直接yield Promise(比如上面核心实现里的示例),但测试case无法比较两个promise...所以添一层描述对象来解决这个问题,测试case可以简单比较描述对象,实际起作用的Promiseredux-saga内部生成 这样做的好处是单测不用mock异步方法(一般单测中会把所有异步方法替换掉...,只比较传入参数是否相同,而不做实际操作),可以简单比较操作指令(Effect)是否等价。

    1.9K41

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

    点击按钮,移动鼠标)就会向reducer派发一个action 4、reducer接受到action后就会去更新state 5、store是包含了所有的state,可以把它看作所有状态的集合 Redux...正因为这个action creator可以返回一个函数,那么就可以在这个函数执行一些异步的操作,就比如网络请求。...4.2、redux-promise 使用redux-promise中间件,允许action是一个promise,在promise,如果要触发action,则通过调用resolve来触发 4.3、redux-sage...redux-saga将react的同步操作与异步操作区分开来,以便于后期的管理与维护 ,redux- saga相当于在Redux原有数据流多了一层,通过对Action进行监听,从而捕获到监听的Action...,但是,这整个Action方法,返回的是一个async,async其实本质也就是promise对象,那么又是一个异步对象,所以它的外部不会等待,当代码执行到await这块, 因为需要时间来调用接口,所以会跳出去

    4.2K30

    React面试基础

    我们需要保证元素的key在列表具有唯一性,这样可以帮助React定位到正确的节点进行比较,从而大幅减少DOM操作的次数,提高性能。...6、ES5、ES6、ES7、ES8对比 ES5:扩展了Object、Array、Function等功能 ES6:类、模块化、箭头函数、级作用域、赋值解构、扩展运算符、Promise、新数据结构Set,...我们可以为添加ref属性然后在回调函数接受该元素在DOM树的句柄,该值会作为回调函数的第一个参数返回: class CustomForm exrends Component { handleSubmit...Redux工作流程: 1、应用调用store的dispatch接受action传入store; 2、reducer进行state操作; 3、应用通过store提供的getState获取最新的数据。...Flux和Redux主要区别在于Flux有多个可以改变应用状态的store,在Fluxdispatcher被用来传递数据到注册的回调事件;在Redux只能定义一个可更新状态的store,redux

    1.5K20

    大前端领域Middleware有几种实现方式?

    框架 use注册 next调度 compose编排 处理对象 Express Y Y N req & res Koa Y Y Y ctx Redux N Y Y action Axios Y N N config...()); } return promise; } 这里通过 promise 的链式调用,将 interceptors 串联了起来,执行顺序是:requestInterceptorChain ->...框架 实现方式 Express 递归调用next Koa 递归调用dispatch Redux Array.reduce实现函数嵌套 Axios promise.then链式调用 这里面最精妙也是最难理解的就是...promise.then链式调用的任务编排方法也十分巧妙,前面处理完的数据会自动传给下一个then。递归调用的形式则最好理解,Koa在Express实现的基础上天然支持异步调用,更符合服务器端场景。...八、总结 本文从使用方式入手,结合源码讲解了各大前端框架 Middleware 的实现方式,横向对比了他们之间的异同。当中的递归调用、函数嵌套和 promise 链式调用的技巧非常值得我们借鉴学习。

    70310

    JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 asyncawait 更好地编码方式!

    JavaScript程序的构建 你可能在单个.js文件编写 JavaScript 应用程序,但可以肯定的是,你的程序由几个组成,其中只有一个正在执行,其余的将在稍后执行。最常见的单元是函数。...这种变化的一个主要原因是ES6引入了 Promises,因为ES6需要对事件循环队列上的调度操作进行直接、细度的控制。...现在只讨论这个概念,以便在讨论带有Promises的异步行为时,能够了解 Promises 是如何调度和处理。 想像一下:任务队列是一个附加到事件循环队列每个标记末尾的队列。...Promise.then(…) 实际上可以使用两个函数,第一个函数用于执行成功的操作,第二个函数用于处理失败的操作: 如果在获取x或y时出现错误,或者在添加过程中出现某种失败,sum(…) 返回Promise...可链接调用 Promise 真的很有用: 创建一个延迟2000ms内完成的 Promise ,然后我们从第一个then(...)回调返回,这会导致第二个then(...)等待 2000ms。

    3.1K20

    React知识图谱

    可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 规则1:不要在循环,条件或嵌套函数调用 Hook, 确保总是在你的 React 函数的最顶层调用他们。...useLayoutEffect 其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。使用场景react-redux的connect。...:基于rxjs,学习成本较高 • 状态更新日志 • redux-logger • 处理promiseredux-promise mobx:响应式编程 mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展...recoil是Facebook开发的,可以使用React内部的调度机制,这是redux和mobx不支持的。 recoil目前还是实验阶段,想要应用到的自己的项目中,等待正式版发了再说吧。...MemoryRouter:把 URL 的历史记录保存在内存的 (不读取、不写入地址栏)。在测试和非浏览器环境很有用,React Native。

    33920

    来自大厂 10+ 前端面试题附答案(整理版)

    ,该方法没有返回值;map()方法不会改变原数组的值,返回一个新数组,新数组的值为原数组调用函数处理之后的值; 深拷贝(考虑到复制 Symbol 类型)题目描述:手写 new 操作符实现实现代码如下:...进程和线程的区别进程可以看做独立应用,线程不能资源:进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位);线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程可以有多个线程...通信方面:线程间可以通过直接共享同一进程的资源,而进程通信需要借助 进程间通信。调度:进程切换比线程切换的开销要大。...线程是CPU调度的基本单位,线程的切换不会引起进程切换,但某个进程的线程切换到另一个进程的线程时,会引起进程切换。...(Referer 字段会告诉服务器该网页是从哪个页面链接过来的)使用 CSRF Token 进行验证,服务器向用户返回一个随机数 Token ,当网站再次发起请求时,在请求参数中加入服务器端返回的 token

    53430

    每日一题

    Promise 本身是同步的立即执行函数, 当在 executor 执行 resolve 或者 reject 的时候, 此时是异步操作, 会先执行 then/catch 等,当主栈完成后,才会去调用.... // I am eating junk food 分析 这是一个很典型的职责链调用问题,我们使用过 jQuery 应该不会陌生链式调用,但是我们发现现在功能添加了异步操作,我们可以将需要调用的内容存入队列...要在 reducer 中加入异步的操作,如果你只是单纯想执行异步操作,不会等待异步的返回,那么在 reducer 执行的意义是什么。...如果想把异步操作的结果反应在 state ,首先整个应用的状态将变的不可预测,违背 Redux 的设计原则,其次,此时的 currentState 将会是 promise 之类而不是我们想要的应用状态...redux-saga 与其他 redux 中间件比较 redux-thunk 的缺点在于 api 层与 store 耦合,优点是可以获取到各个异步操作时期状态的值,比较灵活,易于控制 redux-promise

    1.2K20

    腾讯前端必会react面试题合集_2023-02-27

    这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能 redux-logger:提供日志输出 redux-thunk:处理异步操作 redux-promise...:处理异步操作,actionCreator的返回值是promise 为什么虚拟dom会提高性能 虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能...在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件引用它们。...]参数不传时,则每次都会优先调用上次保存的函数返回的那个函数,然后再调用外部那个函数; [source]参数传[]时,则外部的函数只会在初始化时调用一次,返回的那个函数也只会最终在组件卸载时调用一次;...[source]参数有值时,则只会监听到数组的值发生变化后才优先调用返回的那个函数,再调用外部的函数。

    1.7K20

    Redux开发实用教程

    Reducer会返回新的State,如果有Middleware,Store会将当前State和收到的Action传递给Middleware,Middleware会调用Reducer 然后返回新的State...永远不要在 reducer 里做这些操作: 修改传入参数; 执行有副作用的操作 API 请求和路由跳转; 调用非纯函数, Date.now() 或 Math.random()。...它不应做有副作用的操作 API 调用或路由跳转。这些应该在 dispatch action 前发生。...我们可将异步Action简答理解为:在Action中进行异步操作操作返回后再dispatch一个action。...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux

    1.4K20

    Redux 异步解决方案2. Redux-Saga中间件

    结合yield  yield操作符会获取右边表达示的值返回 可以用于异步变同步操作 中间件的特性: 以前的 action -> reducers -> store 现在的 action -> middleware...否则会出现惊喜 call generator 只能接受到返回redux-saga初使用 安装: yarn add redux-saga store.js import { createStore...reducer中就会计算新的state并返回 注意: put也是阻塞effect call 解释: call函数 调用其他函数 调用的函数可以是Generator 或者是返回一个promise的简单函数...promise.all race 解释: yield race({post: call(1), timeout: call(2)}) 谁先返回谁先有值 cancel 解释: fork产生的任务 可以使用...cancel取消任务 本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。

    1K20

    React 必会的 10 个概念

    除了如上所述定义 React 组件之外,箭头函数在操作数组以及使用异步回调和 Promise 时也非常有用。 在 React ,我们通常必须从服务器获取数据并将其显示给我们的用户。...为了检索此数据,我们经常使用 Promise 链式调用。 ? Promise 链式调用得到简化,易于阅读,并且使用箭头函数更加简洁: ? 最后,一旦检索到数据,就需要显示它。...现在,您知道如何在 ES6 中使用默认参数。那么默认参数和 React 呢? 在 React ,您可以使用 defaultProps 属性为组件属性设置默认值。但是,这仅适用于类组件。...异步用于定义异步函数,该函数返回隐式 Promise 作为其结果。 ? 请注意,使用异步函数的代码的语法和结构看起来像常规同步函数。 关键字 await仅在异步函数起作用。...它使程序等待,直到 Promise 成功并返回其结果。这是一个 Promise 在几秒钟后 resolve 的示例: ?

    6.6K30

    字节前端面试被问到的react问题

    这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...处理异步操作,actionCreator的返回值是promiseReactrefs的作用是什么?...函数中间件的主要目的就是修改dispatch函数,返回经过中间件处理的新的dispatch函数redux使用:实际就是再次调用循环遍历调用reducer函数,更新state什么是 React Context...plain object保存数据,需要手动处理变化后的操作;mobx适用observable保存数据,数据变化后自动处理响应的操作redux使用不可变状态,这意味着状态是只读的,不能直接去修改它,而是应该返回一个新的状态...进行遍历、对比等是可以中断,歇一会儿接着再来。commit阶段是对上一阶段获取到的变化部分应用到真实的DOM树,是一系列的DOM操作

    2.1K20

    2023我的前端面试小结3

    现在,它们已包括推送通知和后台同步等功能。 将来,Service Worker将会支持定期同步或地理围栏等其他功能。 本教程讨论的核心功能是拦截和处理网络请求,包括通过程序来管理缓存的响应。...第一类方案的流行框架有 Redux-thunk、Redux-PromiseRedux-Observable、Redux-Saga 等。...:一次是在创建子类原型时new SuperType()调用,另一次是在子类构造函数SuperType.call()调用。...在 JavaScript ,我们将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量(变量名或者函数名)查找手写题:Promise 原理class MyPromise...Promise.all传入的是数组,返回的也是是数组,并且会将进行映射,传入的promise对象返回的值是按照顺序在数组中排列的,但是注意的是他们执行的顺序并不是按照顺序的,除非可迭代对象为空。

    69430
    领券