如何在redux action中调用两个API，其中一个API调用依赖于另一个API的返回内容？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

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

5K2 0

你要的 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作为参数。

21.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

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调用，它可以创建一个竞争条件。

8.2K5 0

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

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

2.2K3 0

剥开比原看代码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.9K1 0

redux-saga学习

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

3.4K1 0

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

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

3.4K1 1

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.8K2 0

Redux源码浅析

替换reducer，简单粗暴，额外执行一次replace的action，类似于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

2K7 1

从全栈开发到微服务架构：一次真实面试中的技术深度解析

我会把逻辑封装在一个自定义的useForm函数中，然后在组件中调用它。面试官：听起来不错。那你能给出一个具体的示例代码吗？...整个过程是不可变的，所以每次状态更新都会返回一个新的对象，而不是直接修改原来的状态。面试官：很好，看来你对Redux的理解比较深入。...那你能举一个具体的例子说明你是如何在项目中使用Redux的吗？应聘者：好的，比如在我们的购物车功能中，我们使用Redux来管理商品列表和购物车状态。...比如，当一个服务启动时，它会将自己的信息（如主机名、端口、健康状态等）注册到Eureka Server。其他服务可以通过Eureka Client来查找并调用这些服务。...比如，当用户下单后，我们会将订单信息发送到Kafka的一个topic中，然后由另一个消费者服务来处理后续的业务逻辑。面试官：那你能说说Kafka的基本原理吗？

1911 0

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 文件，并在其中编写内容如下： // ...

3.1K1 0

ReactNative之Redux详解

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

1.8K1 0

精读《zustand 源码》

zustand 是一个非常时髦的状态管理库，也是 2021 年 Star 增长最快的 React 状态管理库。它的理念非常函数式，API 设计的很优雅，值得学习。...返回一个 hook 可以在 React 组件中访问 store。...createStore 返回一个类似 redux store 的数据管理实例，拥有四个非常常见的 API： export type StoreApi = { setState...对应代码就不贴了，很显然，subscribe 时注册的监听函数会作为 listener 添加到 listeners 队列中，当发生 setState 时便会被调用。...= action => { set(state => reducer(state, action), false, action) return action } api.dispatchFromDevtools

1.7K3 0

redux（应用的状态管理器）有那么难吗？没有！

✦ state只能通过触发action来修改，其中action就是一个描述性的普通对象。 ✦ 使用reducer来描述action如何改变state。...()，最常用的API // 修改state的唯一方式就是调用store.dispatch()方法 // 显然，其中的描述性对象 // { // type: 'ADD_TODO', // text:...API，主要记住前两个。...所以永远不要再reducer中做如下操作： ✦ 修改传入的state参数 ✦ 执行有副作用的操作，比如API请求，路由跳转等 ✦ 调用非纯函数，比如Math.random()或Date.now() 而一旦...✦ state只能通过触发action来修改，其中action就是一个描述性的普通对象。 ✦ 使用reducer来描述action如何改变state。

4.3K1 0

如何自动化测试 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 返回数据不一致导致的问题

4.1K2 1

react-redux Hook API 简介

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

2.1K4 0

深入Redux架构

store.dispatch(action); 然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。...下面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。...Action 就是 View 发出的通知，表示 State 应该要发生变化了。 Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。...store.subscribe方法返回一个函数，调用这个函数就可以解除监听。...（2）返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。

2.9K6 0

React saga_react获取子组件ref

比如下面是一个获取商品列表的异步操作所对应的action： export default ()=>(dispatch)=>{ fetch('/api/goodList',{ //fecth返回的是一个...和调用redux的其他中间件一样，如果想使用redux-saga中间件，那么只要在applyMiddleware中调用一个createSagaMiddleware的实例。...products = yield call(Api.fetch, '/products') // ... } 上述代码中，比如我们需要测试Api.fetch返回的结果是否符合预期，通过调用call...(fn, ...args) call方法调用fn，参数为args，返回一个描述对象。...在saga.js文件中监听这两个方法并执行副作用函数，最后put发出转化后的action，给reducer函数调用： function * watchUsername(){ while(true){

5.4K3 0

React系列-自定义Hooks很简单

它接收一个形如(state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。...，或者下一个 state 依赖于之前的 state 等。...JSX Element ) } ❗️我们的state变化很复杂，经常一个操作需要修改很多state，另一个好处是所有的state处理都集中到了一起，使得我们对state的变化更有掌控力...有关系的，接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。...简单理解就是连接组件和数据中心，也就是把React和Redux联系起来,可以看看官方文档或者看看阮一峰老师的文章，这里我们要去实现它最主要的两个API Provider 组件 Provider:组件之间共享的数据是

2.5K2 0

Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）

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

2.8K2 0

点击加载更多

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

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

RxJS & React-Observables 硬核入门指南

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

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

redux-saga学习

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

Redux开发实用教程

Redux源码浅析

从全栈开发到微服务架构：一次真实面试中的技术深度解析

Taro 小程序开发大型实战（七）：尝鲜微信小程序云（下篇）

ReactNative之Redux详解

精读《zustand 源码》

redux（应用的状态管理器）有那么难吗？没有！

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

react-redux Hook API 简介

深入Redux架构

React saga_react获取子组件ref

React系列-自定义Hooks很简单

Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐