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

如何在redux action中调用两个API,其中一个API调用依赖于另一个API的返回内容?

在redux action中调用两个API,其中一个API调用依赖于另一个API的返回内容,可以通过以下步骤实现:

  1. 创建两个异步的action creator函数,分别用于调用两个API。例如,一个叫做fetchData1,另一个叫做fetchData2
  2. fetchData1中,首先发起第一个API的请求,并在请求成功后,将返回的数据作为参数传递给fetchData2
代码语言:txt
复制
export const fetchData1 = () => {
  return async (dispatch) => {
    try {
      const response = await fetch('API1_URL');
      const data = await response.json();
      
      // 调用fetchData2,并将API1的返回数据作为参数传递
      dispatch(fetchData2(data));
    } catch (error) {
      // 处理错误
    }
  };
};
  1. fetchData2中,接收API1的返回数据作为参数,并发起第二个API的请求。
代码语言:txt
复制
export const fetchData2 = (data1) => {
  return async (dispatch) => {
    try {
      // 根据API1的返回数据,构造第二个API的请求参数
      const params = {
        data1,
      };
      
      const response = await fetch('API2_URL', {
        method: 'POST',
        body: JSON.stringify(params),
      });
      const data = await response.json();
      
      // 处理第二个API的返回数据
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      // 处理错误
    }
  };
};
  1. 在组件中,调用fetchData1来触发整个流程。
代码语言:txt
复制
import { connect } from 'react-redux';
import { fetchData1 } from 'actions';

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData1();
  }
  
  // ...
}

export default connect(null, { fetchData1 })(MyComponent);

这样,当组件挂载时,fetchData1会被调用,然后依次调用两个API,并将第一个API的返回数据传递给第二个API。最终,第二个API的返回数据会被存储到redux store中,可以在组件中通过props获取并使用。

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

相关·内容

【React】211- 2019 React Redux 完全指南

给 Reducer 一个初始状态 记住 reducer 职责是接收当前 state 和一个 action 然后返回 state。 它还有另一个职责:在首次调用时候应该返回初始 state。...这样写是因为 connect 是一个高阶函数,它简单说就是当你调用它时会返回一个函数。然后调用返回函数传入一个组件时,它会返回一个新(包装)组件。...Actions 生成器在 Redex 术语一个简单函数术语,它返回一个 action 对象。就这些 :) 这是其中两个返回熟悉 actions。...而且,与 Redux 其他所有内容一样,这个也是一个惯例,如果你不需要的话可以忽略掉。 在你调用 API 之前,dispatch BEGIN action。...返回产品数据后,我们写一个 reducer 把它存进 Redux store

4.2K20

你要 React 面试知识点,都在这了

何在重新加载页面时保留数据 单页应用程序首先在DOM中加载index.html,然后在用户浏览页面时加载内容,或者从同一index.html后端API获取任何数据。...如何在React进行API调用 我们使用redux-thunk在React调用API。因为reduce是纯函数,所以没有副作用,比如调用API。...因此,我们必须使用redux-thunk从 action creators 那里进行 API 调用。...Action creator 派发一个action,将来自API数据放入action payload 。Reducers 接收我们在上面的redux循环中讨论数据,其余过程也是相同。...这里有一个例子。sendEmailAPI是从组件调用函数,它接受一个数据并返回一个函数,其中dispatch作为参数。

18.4K20

RxJS & React-Observables 硬核入门指南

Redux,无论何时dispatch一个action,它都会运行所有的reducer函数,并返回一个状态state。...在Redux,无论何时dispatch一个action,它都会运行所有的reducer函数,并返回一个状态state。...在本节,我将比较redux-observable和redux-thunk,以展示redux-observable如何在复杂用例中发挥作用。...但我不讨厌redux- tank,我喜欢它,我每天都在使用它! 练习1:调用API 用例:调用API来获取文章注释。当API调用正在进行时显示加载器,并处理API错误。...假设API本身平均需要2-3秒才能返回结果。现在,如果用户在第一个API调用进行时输入了一些东西,1秒后,我们将创建第二个API。我们可以同时有两个API调用,它可以创建一个竞争条件。

6.8K50

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

下面这张图描述了Generator函数实际调用流程: 当你调用mySaga()时,其实并没有真正执行函数,而只是返回一个迭代器(Iterator)。...另一个常用辅助函数时takeLatest(),当有相同action发送过来时,会取消当前正在执行任务并重新启动一个worker saga。...提供了一系列API函数来生成Effect对象,比较常用是下面这几个: call:函数调用 select:获取Store数据 put:向Store发送action take:在Store...当接收到指定action时,会启动一个worker saga,并驱动其中yield调用。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.7K30

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

,主要原因是它是一种通用展示方式:以表格形式来展示一个数组多个元素内容。...比如, 在Redux,通常会有一个叫store数据结构,像一个巨大JSON对象,持有整个应用所有需要数据; 我们需要写很多reducer,它们就是store转换器,根据当前传入store返回一个内容不同...store,store在不同时刻内容可以看作不同state action是用来向reducer传递数据,reducer将根据action类型和参数来做不同转换 dispatch是Redux提供...会提供一个reduxConnect函数,帮我们把store跟react组件连接起来,使得我们在React组件,可以方便去dispatch 另外,在Chrome,有两个插件可以方便我们去调试React...“新建”,“显示”等等 第3处就是返回值,返回一个对象,它是可以被redux-router理解

1.7K10

Zustand:让React状态管理更简单、更高效

接下来,我们将通过一个简单计数器示例以及如何在状态存储数组,来展示如何在React项目中使用Zustand。 1. 安装Zustand 首先,你需要在项目中安装Zustand。...此外,Zustand体积更小,仅为1KB,相比之下,Redux体积约为7KB。 Redux示例 在Redux,你需要创建一个store,并通过reducers来定义状态更新逻辑。...你可以直接创建一个store并在其中定义状态和更新状态函数。...这样,我们组件就能够与最新状态保持同步。 这个解决方案展示了如何在Zustand状态管理应对组件依赖于状态变化时自动更新问题,确保应用界面与状态同步,提升用户体验。...它是对于复杂状态管理解决方案Redux一个极佳替代品,特别适合那些需要轻量级足迹中小型应用。

40710

redux-saga学习

如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎中间件插件。...sagas监听发起action,然后决定基于这个action来做什么 (比如:是发起一个异步请求,还是发起其他action到store,还是调用其他sagas 等 ) 在redux-saga世界里...反向控制 在 takeEvery 情况,被调用任务无法控制何时被调用, 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。.../非阻塞调用 阻塞调用意思是,Saga 在 yield Effect 之后会等待其执行结果返回,结果返回后才会恢复执行 Generator 一个指令。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.7K10

Redux源码浅析

替换reducer,简单粗暴,额外执行一次replaceaction,类似于init:图片3. combineReducers除了基本createStore,Redux还提供了其他API combineReducer...5. redux中间件:applyMiddleware和compose很多框架koa等都有中间件概念,在这些框架,中间件可以让你在接收请求和生成响应之间放置一些代码,在Redux也一样,它中间件机制在...Redux本身并不包括中间件代码,只是支持应用按照规范写中间件,或使用现成中间件(redux-thunk)。应用中间件API为applyMiddleware。...三个参数分别为storeAPI、nextDispatch、action,参数形式是固定,中间件只关心函数块做什么,以及何时去调用nextDispatch(也即下一个中间件)。...applyMiddleware函数内容为:调用参数传入createStore方法,创建store;封装一个middlewareAPI作为store传参给middleware(该API并非真正store

1.6K71

Redux开发实用教程

Reducer会返回State,如果有Middleware,Store会将当前State和收到Action传递给Middleware,Middleware会调用Reducer 然后返回State...如果一个 model 变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 变化,依次地,可能会引起另一个 view 变化。...在 Redux action 创建函数只是简单返回一个 action: function addTodo(text) { return { type: ADD_TODO, text...永远不要在 reducer 里做这些操作: 修改传入参数; 执行有副作用操作, API 请求和路由跳转; 调用非纯函数, Date.now() 或 Math.random()。...它仅仅用于计算下一个 state。它应该是完全可预测:多次传入相同输入必须产生相同输出。它不应做有副作用操作, API 调用或路由跳转。

1.4K20

Taro 小程序开发大型实战(七):尝鲜微信小程序云(下篇)

微信小程序云函数处理对应 API 请求,返回数据 sagas 获取到对应数据,dispatch action 到对应 reducers 处理逻辑 reducers 接收数据,开始更新本地 Redux...如果获取帖子列表成功,我们使用 redux-saga 提供 effects helpers 函数:put,put 类似之前在 view dispatch 操作,,来 dispatch 了两个 action...打开 src/api/post.js 文件,并在其中编写内容如下: // ......如果获取单个帖子成功,我们使用 redux-saga 提供 effects helpers 函数:put,put 类似之前在 view dispatch 操作,,来 dispatch 了两个 action...打开 src/api/post.js 文件,并在其中编写内容如下: // ...

2.6K10

ReactNative之Redux详解

从这一点来看,redux可以很好解决一个页面多个模块间状态共享问题。 Redux这框架理解起来是比较简单,这个框架本身也是比较小,涉及API也非常少。虽然小,但小而精。...dispatch (action) : 该方法用来修改Store存储状态值,而Action就是一个普通对象,其中可以携带一些修改特定状态时一些信息。...因为该示例是在一个Reducer处理两个Action,所以得用 CountActionType 类型来判断派发是哪个Action,然后做对应操作。...然后创建了一个 addTowNumbers 方法,该方法接收了一个参数,然后返回一个Action对象,其中Action对象类型就是 ADD。...我们给State对象赋了一个默认值, 这个默认值中有两个值,一个是表示加法结果 addResult, 另一个是表示减法结果 descResult。

1.3K10

如何自动化测试 React Native 项目 (下篇) - 单元测试

接着上篇内容, 这篇文章会详细介绍在 Glow 我们如何写单元测试, 以及在 React Native 各个模块单元测试详细实现方式。...在交互测试,我们主要利用 simulate() API模拟事件,来判断这个元素 prop 上特定函数是否被调用, 传参是否正确, 以及组件状态是否发生意料之中修改。...因此需要另一个针对 PrimaryButton 组件单元测试来保证 onPress 这个prop被正确处理了。...WWW API测试 WWW API测试是指对server接口测试, 只要在测试代码调用 React Native API模块方法并且验证返回结果正确性即可(可能需要 mock 一些 token...或者把 WWW API, Action Handler 和 reducer 集成起来, 保证 server 数据和 client 是可兼容, 防止mock数据和 server 返回数据不一致导致问题

3.2K21

react-redux Hook API 简介

useSelector需要注意地方要多一些,文中所有内容均参考react-redux官方教程,就是翻译和总结了一下(参考文章2)。...: Function) storestate是selector唯一参数,可以从redux store获取数据。 selector应该是一个纯函数,因为它潜在性地会在任意时刻执行多次。...selector可以返回任何值,不一定mapState一样是个对象。而且这个返回值即是useSelector()返回值。...如果在一个函数组件调用了多次useSelector(),就会生成多个独立对store订阅,但是因为react批量更新机制,当每次dispatch action时,还是只返回一个新值。...注意不要用useSelector()selector以整个对象形式返回store state,因为每次返回都是一个新对象,依据第五条比较方式来说,肯定会重新触发更新,造成不必要性能浪费。

1.5K40

React 设计模式 0x1:组件

useEffect 接受两个参数,分别是: 带有可选返回语句函数 可选返回语句是一个函数,它在组件卸载时执行,用于进行清理工作,定时器、事件监听器等 可选依赖项数组 当不传入依赖项数组时,...以下是一些实现方式: Props Context API Redux useReducer # Props Props 是在 React 一个组件传递数据到另一个组件一种方式,props 是从父组件传递到子组件对象...Context API 也是一种从一个组件传递数据到另一个组件方式。...Context API两个主要方法: Provider Provider 接受一个要传递给子组件值 Consumer Consumer 允许调用组件订阅 context 更新 import React...Redux 库包括以下三个部分: Store 用于存储全局状态 这一部分是不可变,即它无法改变 Reducer Reducer 是一个纯函数,它接受两个参数(初始状态和操作),并返回一个状态

84910

Taro 小程序开发大型实战(六):尝鲜微信小程序云(上篇)

使用 Hooks 版 Redux 实现了 post 逻辑状态管理重构 如果你敲到这里,会发现我们之后内容都是纯前端(小程序端)逻辑,一个完整可上线小程序应用应该还要有后端,在这篇文章,我们将使用微信小程序云作为我们后台...序号4是代表我们此次云环境标识符,可以用于在小程序端以 API 调用云开发资源时标志此时调用云环境。 在本篇教程,我们会用到上面提到数据库和云函数两项功能。...我们统一将所有的 API 文件放到 api 文件夹里面,这便于我们日后代码维护工作,在 src 文件夹下创建 api 文件夹,在其中添加 user.js 文件,并在文件编写内容如下: import...提示 想了解更多关于微信小程序云函数内容,可以查阅微信小程序云函数文档:文档地址[14] 如果调用成功,我们可以接收返回值,用于从后端返回数据,这里我们使用解构方法,从返回体里面拿到了 result...对象,然后取出其中 user 对象并作为 login API 函数返回值。

2.2K20
领券