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

如何在React Redux中从我的ActionCreator返回promise

在React Redux中,从ActionCreator返回Promise可以通过使用中间件来实现。中间件是一个位于action被发起之后,到达reducer之前的扩展点,它可以拦截、处理和转发action。常用的中间件是redux-thunk和redux-saga。

  1. 使用redux-thunk中间件:
    • 安装redux-thunk:npm install redux-thunk
    • 在Redux的store配置中,将redux-thunk作为中间件应用:
    • 在Redux的store配置中,将redux-thunk作为中间件应用:
    • 在ActionCreator中,可以返回一个函数而不是一个普通的action对象。这个函数接收dispatch和getState作为参数,可以在函数内部进行异步操作,并在操作完成后使用dispatch触发其他action。
    • 在ActionCreator中,可以返回一个函数而不是一个普通的action对象。这个函数接收dispatch和getState作为参数,可以在函数内部进行异步操作,并在操作完成后使用dispatch触发其他action。
  • 使用redux-saga中间件:
    • 安装redux-saga:npm install redux-saga
    • 在Redux的store配置中,将redux-saga作为中间件应用:
    • 在Redux的store配置中,将redux-saga作为中间件应用:
    • 创建一个saga文件,定义异步操作的逻辑:
    • 创建一个saga文件,定义异步操作的逻辑:
    • 在ActionCreator中,触发异步操作的action:
    • 在ActionCreator中,触发异步操作的action:

以上是在React Redux中从ActionCreator返回Promise的两种常见方式。通过使用redux-thunk或redux-saga中间件,可以实现在ActionCreator中进行异步操作,并在操作完成后触发其他action来更新Redux的状态。

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

相关·内容

应用到源码-深入浅出Redux

引言 大家好,这是一篇没有任何注水 Redux 入门到精通源码解读文章。 文章每一行代码都是笔者深思熟虑敲下,欢迎对 Redux 感兴趣同学共同讨论。 文章篇幅较长,建议收藏逐步阅读。...希望文章内容可以对大家有所启发。 createStore 基础概念 谈起 redux 首当其冲必须最开始 createStore 入口方法谈起,我们先来看看 createStore 用法。...完整源码地址你可以在这里查阅到,想说是其实上述实现代码已经可以说一比一还原了 redux createStore 源码了。...经过 for 循环第一次迭代,此时 args store.disaptch 变成了 promise 返回函数(这里我们称为promiseAction 函数) (action) => { console.log...之后,如果有时间的话也会和大家分享一些 Redux 周边生态用法和源码,比如一些 react-readux、dva、immutabl 等等相关。

1.3K10

ReactRedux源码分析

网上盗图... ReduxReact关系?...Redux是一个独立状态管理容器,本身与React没什么关系;如果想用Redux作为React应用状态管理器,需要借助react-redux组件建立ReduxReact联系 ?...注:在index.js中统一导出分散在各目录子模块,这样使用者无论需要用到什么模块,只需统一位置import,无需记忆各子模块实际位置;值得借鉴; 2. utils/isPlainObject.js...8. applyMiddleware.js 9. compose.js 8.1 compose.js: compose实际上是一个函数式编程写法,表示右向左组合多个函数。...限于篇幅 只写了认为是重点内容 貌似比较凌乱 欢迎大家留言讨论 参考: 《深入React技术栈》 https://github.com/reduxjs/redux https://github.com

85420

一天梳理完react面试高频题

这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...处理异步操作,actionCreator返回值是promise如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 path 属性和当前地址...React-Router如何获取URL参数和历史对象?(1)获取URL参数get传值路由配置还是普通配置,:'admin',传参方式:'admin?id='1111''。...props 是什么react核心思想是组件化,页面被分成很多个独立,可复用组件而组件就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以props就是外部传入组件内部数据由于react...(thunk));const store = createStore(reducer, enhancer);export default store;添加一个返回函数actionCreator,将异步请求逻辑放在里面

4.1K20

你想要——redux源码分析

大家好,今天给大家带来redux(v3.6.0)源码分析~首先是reduxgithub接下来我们看看redux在项目中简单使用,一般我们都从最简单开始入手哈备注:例子结合react进行使用...,当然redux不仅仅能结合react,还能结合市面上其他大多数框架,这也是它比较流弊地方首先是创建一个storeimport React from 'react'import { render }...from 'react-dom'// 首先我们必须先导入reduxcreateStore方法,用于创建store// 导入applyMiddleware方法,用于使用中间件import { createStore...最简单用法,接下来我们就来看看redux源码里面具体是怎么实现吧首先我们看看整个redux项目的目录结构,目录我们可以看出,redux项目源码其实比较简单接下来就从入口文件index.js开始看吧...() // 将监听者函数push到nextListeners nextListeners.push(listener) // 返回一个取消监听函数 // 原理很简单就是将当前函数数组删除

14410

前端react面试题总结

这种机制可以让我们改变数据流,实现异步 action ,action 过 滤,日志输出,异常报告等功能常见中间件:redux-logger:提供日志输出;redux-thunk:处理异步操作;redux-promise...: 处理异步操作;actionCreator 返回值是 promise类组件和函数组件之间区别是啥?...这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...处理异步操作,actionCreator返回值是promisecreateElement过程React.createElement(): 根据指定第一个参数创建一个React元素React.createElement...基本上,这是一个模式,是 React 组合特性衍生出来,称其为纯组件,因为它们可以接受任何动态提供子组件,但不会修改或复制输入组件任何行为。

2.5K30

Redux with Hooks

按照官网介绍,Hooks带来好处有很多,其中让感受最深主要有这几点: 函数式组件相比class组件通常可以精简不少代码。 没有生命周期束缚后,一些相互关联逻辑不用被强行分割。...由于mapDispatchToProps被调用时会返回一个全新对象(上面的queryFormData、submitFormData也将会是全新函数),所以这会导致上面传入到queryFormData...实际上,如果我们有遵循React官方建议,给项目装上eslint-plugin-react-hooks的话,这种写法就会收到eslint告警。所以代码质量角度考虑,尽量不要偷懒采用这种写法。...和派发actionsdispatch函数注入到被Provider包裹所有子元素,再配合useReducer,看起来确实是个穷人版Redux。...此外,使用Hooks自建全局状态管理方式在小项目中固然可行,然而想用在较大型、正式业务,至少还要花费心思解决性能问题,而这个问题正是React-Redux等工具已经花费不少功夫帮我们解决了,似乎并没有什么充分理由要抛弃它们

3.3K60

React总结概括

第一次做react项目的时候并没有用redux,所有的逻辑都是在组件内部实现,当时为了实现一个逻辑比较复杂购物车,洋洋洒洒居然写了800多行代码,回头一看我自己都不知道写是啥,画面太感人。...但是怎么样将它们整合起来,搭建一个完整项目。 1、先引用 react.js,reduxreact-router 等基本文件,建议用npm安装,直接在文件引用。...2、 react.js,reduxreact-router 引入所需要对象和方法。...5、利用connect将actionCreator,reuder和顶层ui组件进行关联并返回一个新组件。...上图顶层ui组件属性总共有18个,如果刚刚接触react,可能对这些属性怎么来感到困惑,其实这些属性来自五个地方: 组件自定义属性1个,actionCreator返回对象6个,reducer返回

1.2K20

React 16 setState 返回 null 妙用

概述 在 React 16 为了防止不必要 DOM 更新,允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。...React 16 对状态性能进行了改进,如果新状态值与其现有值相同的话,通过在 setState 返回 null 来防止来触发更新。 ?...在下面的两个 GIF 突出显示了 React DevTools 更新: ? 没有 setState 返回 null ?... setState 返回 null 之后 注意:在这里换了一个深色主题,以便更容易观察到 React DOM 更新。...总结 本文介绍了在 React 16 怎样 setState 返回 null。在下面的 CodeSandbox 添加了 mocktail 选择程序完整代码,供你使用和 fork。

14.5K20

Redux介绍及源码解析

同时 Redux 利用纯函数简单明了特点, 在 Flux 架构基础上进行了优化和功能增强 (支持中间件、异步等), 降低了复杂度, 同时还提供强大工具库支持 (React-ReduxRedux-Toolkit..., Flux 只支持同步一些方法调用, 而在 Redux 中提供了相应解决方案, 那就是通过引入中间件 middleware 模式添加异步 action, redux-thunk....定义 type, 所有这些 type 都要返回当前状态, 否则会抛出异常...采用了类似 koa 洋葱模型来运行代码逻辑, 由外到里触发, 再由里到外返回....三、总结现在我们可以来对比一下 Flux 和 Redux 之间差异实现思路实现方式定位使用范围StoreDispatcherState状态更新异步逻辑Flux单向数据流响应式编程一种架构方案react

2.5K20

谈谈 React + Redux 可复用性

在一个新项目中,页面模块代码是被复制过去,其中包括 React 耦合业务代码以及 Redux ActionCreator 和 Reducers。...特别是腾讯云官网控制台有个特点,基本上每个组件控制台都有表格,而表格渲染、加载、刷新、分页逻辑 和 状态树都分散在React 业务组件、Redux ActionCreator 和 Reducers...二、React + Redux 业务层复用方案 上述所述,团队开发方式存在一个本质问题就是缺乏 React + Redux 业务层模块复用。...三、核心原理 Remod在React Redux框架运用如下图所示,其中蓝色部分是 Remod核心。...React-Redux是通过connect方法将React组件绑定到Redux,该方法返回一个WrappedComponent,WrappedComponent包装了当Redux状态变化React组件处理逻辑

3.6K20

完全理解 redux零实现一个 redux

前言 记得开始接触 react 技术栈时候,最难理解地方就是 redux。全是新名词:reducer、store、dispatch、middleware 等等,就理解 state 一个名词。...本章不会把 redux 各种概念,名词解释一遍,这样和其他教程没有任何区别,没有太大意义。我会带大家零实现一个完整 redux,让大家知其然,知其所以然。...开始前,你必须知道一些事情: reduxreact 没有关系,redux 可以用在任何框架,忘掉 react。...redux 是一个状态管理器。 Let's Go! 状态管理器 简单状态管理器 redux 是一个状态管理器,那什么是状态呢?状态就是数据,比如计数器 count。...总结 到了最后,想把 redux 关键名词列出来,你每个都知道是干啥吗?

73320

学习 redux 源码整体架构,深入理解 redux 及其中间件原理

其他源码计划有:express、vue-rotuer、reduxreact-redux 等源码,不知何时能写完(哭泣),欢迎持续关注(若川)。 源码类文章,一般阅读量不高。...redux源码4.x(截止至2020年06月13日,4.x分支最新版本是4.0.5,master分支是ts,文章暂不想让一些不熟悉ts读者看不懂)分支克隆到了项目里一个子项目,得以保留git信息...所以返回是next函数,他们串起来执行了,形成了中间件洋葱模型。人们都说一图胜千言。画了一个相对简单redux中间件原理图。 ?...实现是循环加promise。由于代码比较长就省略了,具体看链接若川:学习 koa 源码整体架构,浅析koa洋葱模型原理和co原理小节 koa-compose 源码(洋葱模型实现) 6....而reduxreact没有关系,所以它可以使用于小程序或者jQuery等。如果需要和react使用,还需要结合react-redux库。

1.5K20

社招前端二面react面试题集锦

redux有什么缺点一个组件所需要数据,必须由父组件传过来,而不能像flux中直接store取。...这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...处理异步操作,actionCreator返回值是promise参考 前端进阶面试题详细解答React怎么做数据检查和变化Model改变之后(可能是调用了setState),触发了virtual dom...在 React组件是一个函数或一个类,它可以接受输入并返回一个元素。注意:工作,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。...同时,React 还需要借助 key 来判断元素与本地状态关联关系。现在有一个button,要用react在上面绑定点击事件,要怎么做?

2K60

React-Redux入门

1、概念 react只是一个轻量级视图层框架,如果要做大型应用就要搭配视图层框架redux一起使用 redux组件之间传值非常简单,redux里面要求我们把数据都放在一个公共存储区域store里面...这样的话不管组件层次有多深,但是走流程都是一样,会把数据传递简化很多。 2、Redux工作流程 ?...,TodoList增删 谷歌访问助手——https://github.com/haotian-wang/google-access-helper 1)要想更新state数据,首先派发一个action...3)reducers接收state和action后进行数据处理,重新生成一个newState(原state只读不改),把newState作为返回返回给store。...5)react组件中观测到数据发生改变(store.subscribe),会store里面重新取数据(state),更新组件内容,页面发生变化。

65830

深入学习和理解 Redux

因此状态管理框架( Vuex、MobX、Redux等)就显得十分必要了,而 Redux 就是其中使用最广、生态最完善。...第三步:根 Reducer 会将多个不同 Reducer 函数合并到单独状态树。 第四步:Redux store会保存根 Reducer 函数返回完整状态树。...首先得Reducer说起,之前 Redux三大原则里面提到了reducer必须是纯函数,下面给出纯函数定义: 对于同一参数,返回同一结果 结果完全取决于传入参数 不产生任何副作用 至于为什么reducer...如上图所示就是 Redux devtools可视化界面,左边操作界面就是当前页面渲染过程执行action,右侧操作界面是State存储数据,State切换到action面板,可以查看action...如常用react-redux、dva都是对 Redux 封装,目前在大型应用中被广泛使用。这里推荐通过 Redux官网以及源码来学习它核心思想,进而提升阅读源码能力。

84620
领券