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

如何在redux-saga中传递urls,params,header到call()?

在redux-saga中,可以通过call()函数来发起异步请求。如果需要传递urls、params和header到call()函数中,可以通过以下步骤实现:

  1. 首先,确保已经安装并引入了redux-saga和相关依赖。
  2. 在saga文件中,定义一个处理异步请求的generator函数,例如:
代码语言:txt
复制
import { call } from 'redux-saga/effects';

function* fetchData(action) {
  const { url, params, headers } = action.payload;
  try {
    const response = yield call(fetch, url, { params, headers });
    // 处理响应数据
  } catch (error) {
    // 处理错误
  }
}
  1. 在Redux的action中,创建一个包含urls、params和header的payload对象,并触发相应的action,例如:
代码语言:txt
复制
export const fetchUserData = (url, params, headers) => ({
  type: 'FETCH_USER_DATA',
  payload: { url, params, headers },
});
  1. 在Redux的reducer中,监听对应的action,并将其传递给saga处理,例如:
代码语言:txt
复制
import { takeEvery } from 'redux-saga/effects';

function* watchFetchData() {
  yield takeEvery('FETCH_USER_DATA', fetchData);
}
  1. 最后,在Redux的store中,将saga与应用程序关联起来,例如:
代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { watchFetchData } from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(watchFetchData);

export default store;

通过以上步骤,你可以在redux-saga中成功传递urls、params和header到call()函数中,实现异步请求的处理。请注意,以上代码仅为示例,实际应用中可能需要根据具体情况进行调整。

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

相关·内容

React saga_react获取子组件ref

如何处理副作用操作,在redux中选择在发出action,reducer处理函数之间使用中间件处理副作用。...中使用: const action = yield take('login'); 可以监听到UI传递中间件的Action,上述take方法的返回,就是dipath的原始对象。...一旦监听到login动作,返回的action为: { type:'login' } call(apply) call和apply方法与jscall和apply相似,我们以call方法为例: call...redux-saga的put方法传递过来的action:change_username和change_password,然后更新state。...5.总结 通过上述章节,我们可以概括出redux-saga做为redux中间件的全部优点: 统一action的形式,在redux-saga,从UIdispatch的action为原始对象 集中处理异步等存在副作用的逻辑

4.5K30
  • redux-saga

    所以添一层描述对象来解决这个问题,测试case可以简单比较描述对象,实际起作用的Promise由redux-saga内部生成 这样做的好处是单测不用mock异步方法(一般单测中会把所有异步方法替换掉...常用的Effect creator如下: 阻塞型方法调用:call/apply 详见Declarative Effects 非阻塞型方法调用:fork/spawn 详见redux-saga’s fork...,所以如果任一task有未捕获的error,当前saga也会结束 另外,cancel机制比较有意思: 对于执行的task序列,所有task自然完成时,把结果向上传递队首,作为上层某个yield的返回值...另外,还会把cancel信号沿着join链向上传递,取消执行所有依赖该task的task 简言之:complete信号沿调用链反向传递,而cancel信号沿task链正向传递,沿join链反向传递 注意...简单理解的话:在redux-saga里,Saga就是generator,Sagas就是多个generator Sagas有2种顺序组合方式: yield* saga() call(saga) 同样,直接

    1.9K41

    一天梳理完react面试高频题

    通过this.props.match.params.id 取得url的动态路由id部分的值,除此之外还可以通过useParams(Hooks)来获取通过query或state传值传参方式:在Link...组件的to属性可以传递对象{pathname:'/admin',query:'111',state:'111'};。...它的主要特性是增量渲染:能够将渲染工作分割成块,并将其分散多个帧。...,则生成新真实的DOM,随后替换页面之前的真实DOM【旧虚拟DOM】 未找到 与 【新虚拟DOM】相同的key 根据数据创建真实DOM,随后渲染页面什么是state在组件初始化的时候 通过this.state...进行【新虚拟DOM】 和 【旧的虚拟DOM】的diff比较,而在这个比较过程key就是起到是关键中用如何将两个或多个组件嵌入一个组件

    4.1K20

    redux-saga入门

    如果参数某个任务失败且该任务未对错误进行处理,那么错误将冒泡all所在的Generator,且取消其他任务。 如果错误被catch处理,那么依然视为完成。不会取消其它任务。...(task1), call(task2)]) // 2,当all接受到结果时输出结果,但是由于task1错误未被捕获,所以错误冒泡rootSaga,所以下面代码将不会执行 console.log(...率先完成任务失败(抛错且未处理),则错误冒泡race所在Generator函数,且取消其他竞赛的任务。 race接收的参数除了是数组外,还可以是对象。...(task1), call(task2)]) // 2,当all接受到结果时输出结果,但是由于task1错误未被捕获,所以错误冒泡rootSaga,所以下面代码将不会执行 console.log(...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.3K20

    【Web技术】639- Web前端单元测试到底要怎么写?

    设计模式与结构分析 在这个场景设计开发,我们严格遵守 redux 单向数据流 与 react-redux 的最佳实践,并采用 redux-saga 来处理业务流, reselect 来处理状态缓存,通过...中间 store 的内容都是 redux 相关的,看名称应该都能知道意思了。 具体的代码请看这里:https://github.com/deepfunc/react-test-demo。...这里我们来看看获取表格数据的业务代码: import { all, takeLatest, put, select, call } from 'redux-saga/effects'; import *...).toBe(api.getBizTableData); /* 调用 api 层参数是否传递正确 */ expect(callEffect['CALL'].args[0]).toEqual...*/ test('getBizTableData api should call postJSON with right params of fetcher', () => {

    3.1K30

    WordPress未经身份验证的远程代码执行CVE-2024-25600漏洞分析

    此外,还包含以下权限检查逻辑if ( bricks_is_ajax_call() && isset( $_POST ) ) { self::verify_request();}elseif ( bricks_is_rest_call...代码注释:REST API(在 API->render_element_permissions_check() 检查权限)表示此检查是否在 WP 的 REST API 的权限回调执行。...永远不应依赖随机数进行授权”:public function render_element_permissions_check( $request ) { $data = $request->get_json_params...原则上任何人都不应该将任何内容传递eval.至少,Bricks 使用的代码库的两个实例eval(查询类和代码块类)应该完全防范未经授权的、非管理员访问,并且输入必须经过严格验证。...')}][{header}][/bold {header_colors.get(header, 'white')}] {message}" )def scan_url(url, payload_type

    1K10

    前端实现异步的几种方式_redux是什么

    上一篇我们介绍过Redux的中间件,说白了就是在action被传递reducer之前新进行了一次拦截,然后启动异步任务,等异步任务执行完成后再发送一个新的action,调用reducer修改状态数据。...redux-saga的功能也是一样的,参见下图: 左边的蓝圈圈里就是一堆saga,它们需要和外部进行异步I/O交互,等交互完成后再修改Store的状态数据。...redux-saga就是一个帮你管理这堆saga的管家,那么它跟其他的中间件实现有什么不同呢?它使用了ES6Generator函数语法。...call(Api.fetchUser, 'alice'), "Should yield an Effect call(Api.fetchUser, 'alice')" ) 为了实现这一目标,redux-saga...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.7K30

    教你如何在React及Redux项目中进行服务端渲染

    同构直出,使用同一份(JS)代码实现,便于开发和维护 一起看看如何在实际的项目中实现服务端渲染 项目地址 ,欢迎围观!...appHtml 即为处理之后的组件字符串 preloadState 为服务器的初始状态,浏览器的后续工作要基于这个初始状态,所以需要将此变量传递给浏览器初始化 <div id="content...把注意力集中<em>到</em>红框<em>中</em> 直接由webpack.config.js同时编译浏览器端和服务端的JS模块 module.exports = [ clientConfig, serverConfig...]; 浏览器端的配置使用 src 下的 client目录,编译<em>到</em> dist 目录<em>中</em> 服务端的配置使用 src 下的 server 目录,编译<em>到</em> distSSR 目录<em>中</em>。...1 import {delay} from '<em>redux-saga</em>'; 2 import {put, fork, takeEvery, takeLatest, <em>call</em>, all, select}

    3K10

    手写Redux-Saga源码

    Redux-Saga这块代码是单独抽取了一个文件,我们仿照这种做法吧。...首先需要在中间件里面将Redux的getState和dispatch等参数传递进去,Redux-Saga使用的是bind函数,所以中间件方法改造如下: function sagaMiddleware({...并执行,如果遇到take就将它注册channel上去,如果遇到put就将对应的回调拿出来执行,但是Redux-Saga又将这个过程分为了好几层,我们一层一层来看吧。...官方文档的这种写法反而很好理解,我这里采用文档的这种写法: export function takeEvery(pattern, saga) { function* takeEveryHelper...整个Redux-Saga都是基于Generator的,每往下走一步都需要手动调用next,这样当他执行中途的时候我们可以根据情况不再继续调用next,这其实就相当于将当前任务cancel了。

    1.7K30

    react项目架构之路初探

    可以参考我的这篇文章 react-redux 提供一个Provider组件 负责吧外层的数据 传递给所有的子组件 connect方法(高阶组件) 负责将props和dispatch的方法 传递给子组件...(dispatch,getState),在函数体内进行业务逻辑的封装 redux-thunk的缺点: action的形式不统一 ,异步操作太分散,分散在了各个action redux-saga本质是一个可以自执行的.../saga' // 引入saga相关组件 import createSagaMiddleware from 'redux-saga' // 引入react-redux相关组件 使redux和react...写法 // 引入 redux-saga 引入effect import {call, put, take, fork, takeEvery, select} from 'redux-saga/effects...代码最后的put 执行reducer设置state中分页数据和每页的返回数据 export function * init () { while (true) { const action

    2.5K10
    领券