首页
学习
活动
专区
工具
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

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
  • 剥开比原看代码13:比原是如何通过list-balances显示帐户余额的?

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

    1.7K10

    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.3K30

    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 链式调用的技巧非常值得我们借鉴学习。

    70710

    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。

    35720

    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

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

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

    53930

    每日一题

    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取消任务 本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。

    1.1K20

    React 必会的 10 个概念

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

    6.6K30

    【前端面试题】我靠它拿到了大厂Offer

    Promise 对象(await通过返回一个Promise对象来实现同步的效果),当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。...:输入整型 1234,返回字符串“4321”。要求必须使用递归函数调用,不能用全局变量,输入函数必须只有一个参数传入,必须返回字符串。...返回值将会按照参数内的 promise 顺序排列,而不是由调用 promise 的完成顺序决定。...例如,如果你传入的 promise,有四个 promise 在一定的时间之后调用成功函数,有一个立即调用失败函数,那么 Promise.all 将立即变为失败。...IFC不可能有级元素的,当插入级元素时(p插入div)会产生两个匿名与div分隔开,即产生两个IFC,每个IFC对外表现为级元素,与div垂直排列。

    1.1K31

    字节前端面试被问到的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
    领券