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

通过action将参数传递给带有promise/thunk的reducer

通过action将参数传递给带有promise/thunk的reducer是指在Redux中使用异步操作时,通过action将参数传递给带有promise或thunk中间件的reducer函数。

在传统的Redux中,reducer函数是同步执行的,无法处理异步操作。为了解决这个问题,可以使用中间件来处理异步操作。常用的中间件有redux-thunk和redux-promise。

  1. redux-thunk:它允许action创建函数返回一个函数,而不是一个普通的action对象。这个返回的函数可以接收dispatch和getState作为参数,并且可以在内部进行异步操作,最终再通过dispatch派发一个普通的action对象给reducer处理。

使用redux-thunk的步骤如下:

  • 安装redux-thunk:npm install redux-thunk
  • 在创建store时,将redux-thunk作为中间件应用:import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk));
  • 创建一个异步的action创建函数,它返回一个函数,并在内部进行异步操作,最终通过dispatch派发一个普通的action对象给reducer处理。
  1. redux-promise:它允许action创建函数返回一个Promise对象,而不是一个普通的action对象。这个Promise对象可以在内部进行异步操作,并且可以通过resolve或reject来触发不同的action。

使用redux-promise的步骤如下:

  • 安装redux-promise:npm install redux-promise
  • 在创建store时,将redux-promise作为中间件应用:import promise from 'redux-promise'; const store = createStore(reducer, applyMiddleware(promise));
  • 创建一个异步的action创建函数,它返回一个Promise对象,并在内部进行异步操作,最终通过resolve或reject来触发不同的action。

这样,通过action将参数传递给带有promise/thunk的reducer就可以实现在Redux中处理异步操作了。

推荐的腾讯云相关产品:

  • 云函数(Serverless):腾讯云云函数是一种无需管理服务器即可运行代码的计算服务,可以用于处理异步操作和事件驱动的任务。详情请参考:云函数产品介绍
  • 云数据库MySQL版:腾讯云云数据库MySQL版是一种高性能、可扩展的关系型数据库服务,适用于存储和管理应用程序的数据。详情请参考:云数据库MySQL版产品介绍
  • 云服务器(CVM):腾讯云云服务器是一种可弹性伸缩的计算服务,提供了丰富的配置选项和网络能力,适用于部署和运行各种应用程序。详情请参考:云服务器产品介绍

以上是关于通过action将参数传递给带有promise/thunk的reducer的完善且全面的答案。

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

相关·内容

Redux-Thunk中间件

我们都知道,在使用redux时候,通过dispatch一个action 发生到reducer 然后传递给store修改状态 一系列都是同步,那如果说我dispatch一个action 这个action...帮我请求一下接口数据,你发现接口请求是异步,没有办法等接口数据返回再传递给reducer 这个时候中间件就产生啦。...redux比较常用中间件有 redux-saga、redux-thunk、redux-promise等 都是为了解决dispatch action异步处理问题 redux中间件 对redux应用实现异步...可以 thunk 看做 store dispatch() 方法封装器;我们可以使用 thunk action creator 派遣函数或 Promise,而不是返回 action 对象。...在去dispatch一个actionreducer // 当应用了thunk中间件时 action creator返回函数都会默认传递一个dispatch方法 然后再去dispatch action

1.3K20
  • 一天梳理完react面试高频题

    redux中间件中间件提供第三方插件模式,自定义拦截 action -> reducer 过程。变为 action -> middlewares -> reducer。...这种机制可以让我们改变数据流,实现如异步actionaction 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...React-Router如何获取URL参数和历史对象?(1)获取URL参数get值路由配置还是普通配置,如:'admin',参方式如:'admin?id='1111''。...通过this.props.match.params.id 取得url中动态路由id部分值,除此之外还可以通过useParams(Hooks)来获取通过query或state参方式如:在Link...function: dispatch 参数依然是⼀个纯粹 action (FSA),⽽不是充满 “⿊魔法” thunk function异常处理: 受益于 generator function

    4.1K20

    造一个 redux-thunk 轮子

    而且容易给人造成误解:好好 fetchUserById 不 id 而是一个 dispatch 函数来初始化。怕是会顺着网线过来锤你。...doSomthing(我参数) // dispatch 修改值 dispatch(...) } 为了下次懒得再一次解释这样函数结构,干脆用一个词这概括它,就叫它 "thunk" 吧。...(action) } 可能有人会觉得 action(dispatch, getState) 里为什么不 next 函数,而是传入 dispatch 函数呢?...,其实是通过所有中间件增强后 dispatch,可以理解为 completelyEnhancedDispatch next,函数签名也是 (action) => action,但是这是在走中间件时函数...withExtraArgs 上面看到我们“顺手”把 getState 也作为参数传入 action 函数里了,除了 dispatch 和 getState,开发者可能也可能想一些额外参数进去,比如开发环境

    74030

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

    state是只读,唯一改变state方法就是触发actionaction会dispatch分发给reducer 3、数据改变只能通过纯函数来执行 使用纯函数来执行修改,也就是reducer 纯函数是什么...从简单 react-thunk 到 redux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题方案 4.1 、redux-thunk redux-thunk...4.2、redux-promise 使用redux-promise中间件,允许action是一个promise,在promise中,如果要触发action,则通过调用resolve来触发 4.3、redux-sage...redux-sagareact中同步操作与异步操作区分开来,以便于后期管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过Action进行监听,从而捕获到监听Action...store 6.1.2、action action则是view用来调用action通过dispatch来触发reducer,然后来更新state 6.1.3、reducer store文件需要配置

    4.2K30

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

    这两个用法是不一样,你需要小心不要错了参数,也不要混淆了他们。...: 'DECREMENT' }) }, 1000) }) 复制代码 如果你使用了这个中间件,而且你dispatch是一个函数,React Thunk会自己dispatch作为参数进去。...而且他会将这些函数action“吃了”,所以不用担心你reducer会接收到奇怪函数参数。你reducer只会接收到纯对象action,无论是直接发出还是前面那些异步函数发出。...你可能会发现很多例子都返回了Promise,这个不是必须,但是用起来却很方便。Redux并不关心你thunk返回了什么值,但是他会将这个值通过外层dispatch()返回给你。...另外你还可以一个复杂thunk action creator拆分成几个更小thunk action creator。

    3.5K51

    react基础--2

    5.备注:容器给UI传递:状态、操作状态方法,均通过props传递 基本使用 1.确保ui组件已经创建 2.创建ui组件容器组件,用于ui组件与redux进行连接 在容器组件键入 /container...需要给connect函数传递两个参数 第一个参数是给ui组件状态,第二个参数是给ui组件操作状态方法 但这两个参数必须是函数,通过函数返回值给到ui组件 如下 // 引入 ui 组件 import...Provider组件使用 如果容器组件很多,那就需要很多次store给容器组件,这里可以通过Provider解决 在index.js入口文件 ... import { Provider } from.../reducers/person' // 引入 redux-thunk 用于支持异步action import thunk from 'redux-thunk' const allReducers...所以reducer不能使用 一些数组方法如 unshift,push直接对原参数进行修改 不是纯函数会影响redux对状态改变 这样会造成数据不响应,不会更新到视图

    1.2K20

    Redux开发实用教程

    Reducer会返回新State,如果有Middleware,Store会将当前State和收到Action递给Middleware,Middleware会调用Reducer 然后返回新State...合并reducer 经过上述步骤我们一个大reducer拆分成了不同reducer,但redux原则是只允许一个根reducer,接下来我们需要将这几个小reducer聚合到一个跟reducer...Store 是存储state容器,Store 会把两个参数(当前 state 树和 action)传入 reducer。...在前一个章节中,我们使用 combineReducers() 多个 reducer 合并成为一个。现在我们通过Redux createStore()来创建一个Store。...像 redux-thunk 或 redux-promise 这样支持异步 middleware 都包装了 store dispatch() 方法,以此来让你 dispatch 一些除了 action

    1.4K20

    Redux中间件Middleware不难,我信了^_^

    公用代码写入一个方法,然后变化参数提取出来。...我们可以每次变异store.dispatch都传递给一个新参数,传入下一次变异之中执行,但是要像这样next1,next2……这样源源不断地下去吗?...通过把函数赋值给一个参数,可以解放嵌套,但这样不太现实,因为我们需要创建许多参数。...三层函数啊,第一层为了传递storedispatch(action)和getState()方法,第二层传递参数next是下一个待执行中间件,第三层是函数本体了,传递参数action是为了最终传递给...这样就可以在action函数中调用dispatch了。机智如你一定发现了这个就是异步一个实现,也就是redux-thunk基本逻辑。(其实就是参照redux-thunk。)

    53341

    redux-saga学习

    redux-saga redux-saga是一个用于管理redux应用异步操作中间件,redux-saga通过创建sagas所有异步操作逻辑收集在一个地方集中处理,可以用来代替redux-thunk...不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你 action 是干净。...fn: Function – 一个 Generator 函数, 也可以是一个返回 Promise 或任意其它值普通函数。 args: Array – 传递给 fn 参数数组。...fn: Function – 一个 Generator 函数,或返回 Promise 普通函数 args: Array – 传递给 fn 参数数组。 返回一个 Task 对象。...它接受当前 state 和一些可选参数,并返回当前 Store state 上一部分数据。 args: Array – 传递给选择器可选参数追加在 getState 后。

    2.7K10

    Redux(四):源码分析之createStore

    一个应用应该只包含一个状态树,为了让state树不同部分去响应action,可能需要使用combineReducers()方法多个reducers组合成一个reducer。...(注:结合es6解构赋值,可以在根reducer参数中初始化,也可以结合combineReducers在子reducer参数中初始化。所以通常可以不用指定preloadedState)。...getState() (slice方法会返回一个新数组,不参数可以快速生成一个副本。)...If you want to * dispatch a Promise, an Observable, a thunk, or something else, you need to * wrap...通过中间件拓展,action可以是promise、函数,但最终传递给底层依然是纯对象。 195行处可以看到执行reducer来计算得出新currentState并覆盖之前值。

    1.2K50

    简析redux技术栈(一):redux中间件

    const chain = middlerWares.map(middleWare => chain(middlerWareAPI)); store两个方法传递给中间件,所有中间件内都是同一份store...所以如果我们把开头 3 个中间件组合起来运行的话, 输出是 before 1 before 2 before 3 经过reducer // reducerlog测试 after 3 after 2...通过上面一堆分析,有几个结论了: 1、 中间件内部必须调用next方法。才能调用下一个中间件并且到达 action 2、中间件内部如果调用了dispatch(重写后)。...这就提到一个大名鼎鼎库redux-thunk。...,thunkdispatch参数就是经过包装dispatch,所以当我们去分发一个同步普通action时候,它又能经过我们其余普通中间件逻辑处理了 reduxapplyMiddleWare

    55510
    领券