redux-saga api yield调用有效，但未返回任何数据 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Discourse API 调用数据返回的问题

在我们调用 Discourse API 创建一个主题的时候，我们会从 Discourse API 的调用文档中看到返回的 thumbnails 返回为 String。...真实的服务器返回数据： "thumbnails": [ { "max_width": null, "max_height": null, "width": 351,...net-zchub-www/discourse-uploads/original/2X/9/93f3403b595896a7dca4461134f8aa5bc74f3605.gif" }因为这样的返回改变就导致了我们程序在处理返回数据的时候提示...JSON 格式数据反序列化错误。...因此，如项目中使用了 Discourse API 的话，需要在对主题添加调用的部分把这个 API 的返回对象改一下。

8720 0

redux-saga学习

，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 ) redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects...实际上，无论是 put 还是 call 都不执行任何 dispatch 或异步调用，它们只是简单地返回 plain Javascript 对象。...（即高级 API） Effect 创建器以下每个函数都会返回一个普通 Javascript 对象（plain JavaScript object），并且不会执行任何其它操作。...它接受当前 state 和一些可选参数，并返回当前 Store state 上的一部分数据。 args: Array – 传递给选择器的可选参数，将追加在 getState 后。...阻塞调用/非阻塞调用阻塞调用的意思是，Saga 在 yield Effect 之后会等待其执行结果返回，结果返回后才会恢复执行 Generator 中的下一个指令。

3.4K1 0

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

是的

没有找到

React saga_react获取子组件ref

是遵循函数式编程的规则，上述的数据流中，action是一个原始js对象（plain object）且reducer是一个纯函数，对于同步且没有副作用的操作，上述的数据流起到可以管理数据，从而控制视图层更新的目的...首先，在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。...products = yield call(Api.fetch, '/products') // ... } 上述代码中，比如我们需要测试Api.fetch返回的结果是否符合预期，通过调用call...不需要模拟Api.fetch函数的具体返回结果。...(fn, ...args) call方法调用fn，参数为args，返回一个描述对象。

5.4K3 0

深入理解 redux 数据流和异步过程管理

但是 context 做为 store 有一个问题，任何组件都能从 context 中取出数据来修改，那么当排查问题的时候就特别困难，因为并不知道是哪个组件把数据改坏的，也就是数据流不清晰。...异步过程的管理很多情况下改变 store 数据都是一个异步的过程，比如等待网络请求返回数据、定时改变数据、等待某个事件来改变数据等，那这些异步过程的代码放在哪里呢？组件？...的参数里： const login = (userName) => (dispatch) => { dispatch({ type: 'loginStart' }) request.post('/api...} from 'redux-saga/effects' function* rootSaga() { yield all([ takeLatest('login', login)...generator 执行后返回的是一个 iterator，需要另外一个程序调用 next 方法才会继续执行。所以怎么执行、是否继续执行都是由另一个程序控制的。

2.9K1 0

react项目架构之路初探

，整体数据结构比较混乱项目简介项目是一个简单的示例的demo 本项目目的在于让更多的读者去了解这种模式，体会这种设计思想所有数据均为mock的假数据，仅供学习之用，不做任何商业用途。...数据流通的关系：通过Store中的这个对象提供的dispatch方法 =》触发action=》改变State =》导致其相关的组件页面重新渲染达到更新数据的效果核心Api以及相关的功能源码分析...，thunks 是在action被创建时调用，而 Sagas只会在应用启动时调用 redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，函数传递两个参数...可以用这两点来提现：持久化的数据结构和结构共享详情可以参考这篇文章在此不做赘述 npm地址以及api介绍：https://www.npmjs.com/package/seamless-immutable...代码最后的put 执行到reducer中设置state中分页数据和每页的返回数据 export function * init () { while (true) { const action

2.9K1 0

redux-saga

[Effect1, Effect2]转换为并行调用类似于装箱（把业务操作用Effect包起来）拆箱（执行Effect里的业务操作），此外，完整的redux-saga还要实现：作为middleware...apply creator，形式与fn.apply类似），内部处理也是类似的： // call返回的描述对象（Effect） { @@redux-saga/IO: true, CALL: {.../products')" )// 预期接口返回数据 const products = {}// expects a dispatch instruction assert.deepEqual( iterator.next...常用的Effect creator如下：阻塞型方法调用：call/apply 详见Declarative Effects 非阻塞型方法调用：fork/spawn 详见redux-saga’s fork...的返回值。

2.4K4 1

手写Redux-Saga源码

这个action会触发一个请求，请求返回的数据拿来显示在页面上就行： import React from 'react'; import { connect } from 'react-redux';.../api'; function* fetchUserInfo() { try { const user = yield call(fetchUserInfoAPI); yield...然后看看fetchUserInfo函数，这个函数也不复杂，就是调用一个API函数fetchUserInfoAPI去获取数据，注意我们这里函数调用并不是直接的fetchUserInfoAPI()，而是使用了...获取数据后，我们调用了put去发出FETCH_USER_SUCCEEDED这个action，这里的put类似于Redux里面的dispatch，也是用来发出action的。...我们调用的effects和真正实现功能的函数是分开的，表层调用的effects只会返回一个简单的对象，这个对象描述了当前任务，他是稳定的，所以基于effects的单元测试很好写。

2.1K3 0

Redux-Saga中间件

结合yield yield操作符会获取右边表达示的值返回可以用于异步变同步操作中间件的特性: 以前的 action -> reducers -> store 现在的 action -> middleware...否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用安装: yarn add redux-saga store.js import { createStore...'; export function* fetchData() { // 利用generator + yield 同步进行数据处理 const data = yield fetch("http...saga常用API takeEvery("actionType", generator)....reducer中就会计算新的state并返回注意: put也是阻塞effect call 解释: call函数调用其他函数调用的函数可以是Generator 或者是返回一个promise的简单函数

1.3K2 0

redux-sage笔记

也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...注意的是，如果call调用fetch，在默认的fetch状态下返回的是Promise实例，但是由于是call调用，返回的是文本信息，可以直接调用 - put - put({type: '...function* authorize(user, password) { try { const token = yield call(Api.authorize, user, password...yield call(Api.storeItem({token})) yield take('LOGOUT') yield call(Api.clearItem('token')...{ const token = yield call(Api.authorize, user, password) yield put({type: 'LOGIN_SUCCESS',

8993 0

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

下面这张图描述了Generator函数的实际调用流程：当你调用mySaga()时，其实并没有真正执行函数，而只是返回了一个迭代器（Iterator）。...实际上，我们可以直接通过yield fetchUser()执行我们的异步任务，并返回一个Promise。...因此，相比于直接调用异步函数，我们可以仅仅 yield 一条描述函数调用的指令，由redux-saga中间件负责解释执行该指令，并在获得结果响应时恢复Generator的执行。..., 'alice'), "Should yield an Effect call(Api.fetchUser, 'alice')" ) 为了实现这一目标，redux-saga提供了一系列API函数来生成...当接收到指定action时，会启动一个worker saga，并驱动其中的yield调用。

2.2K3 0

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

sagas 这里我用了 redux-saga 处理业务流，这里具体也就是异步调用 api 请求数据，处理成功结果和错误结果等。...export function* onGetBizTableData() { /* 先获取 api 调用需要的参数：关键字、分页信息等 */ const {keywords} = yield...api */ const result = yield call(api.getBizTableData, payload); /* 正常返回 */ yield...从对应的 state 里取到调用 api 时需要的参数部分（搜索关键字、分页），这里调用了刚才的 selector。...组合好参数并调用对应的 api 层。如果正常返回结果，则发送成功 action 通知 reducer 更新状态。如果错误返回，则发送错误 action 通知 reducer。

3.6K3 0

redux-saga入门

文章目录资料 redux-saga简介常用API takeLatest takeEvery take delay put call fork cancel all 案例1：错误处理了案例2：错误未处理...常用API takeLatest takeLatest是非阻塞的。...所以往后再有退出的loginOut类型的action派发过来的，并没有任何任务对其保持监听，所以将中间件将忽略掉后续过来的loginOut类型的action。.../非阻塞调用阻塞调用的意思是saga在yield Effect之后会等待其结果返回，结果返回后才会继续执行saga中下一个指令。...非阻塞调用的意思是，saga会在yield Effect之后立即恢复执行。下面是一个阻塞调用与非阻塞调用的例子。阻塞调用：下面代码中call是个会产生阻塞调用的方法。

1.8K2 0

Redux：从action到saga

基本上，如果你需要出发副作用（side effects），使用一种特定的action生成方法：一种返回一个方法的方法，可以实现任意的异步访问并分发任意你想要的action。...这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式（超时，API调用等等。。）...我们来看看如何写一个action creator来获取后端数据并分发到redux store。...我们来看看用saga代替action creator获取todo数据的方法：import { call, put } from 'redux-saga'; function* loadTodos()...看代码： import { fork, take } from 'redux-saga'; function* loadTodos() { yield put({ type: 'FETCHING_TODOS

1.5K0 0

高级前端react面试题总结

和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。...在React中，组件返回的元素只能有一个根元素。为了不添加多余的DOM节点，我们可以使用Fragment标签来包裹所有的元素，Fragment标签不会渲染出任何元素。...和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏，min版25KB左右功能过剩: 实际上并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga.../actionTypes'import axios from 'axios'function* func(){ try{ // 可以获取异步返回数据 const res...如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

5.5K4 0

dva

借鉴自elm和choo，包括elm的subscription和choo的设计理念 elm的subscription 通过订阅一些消息来从其它数据源取数据，比如websocket connection of...自身有没有做到就不好说了（从choo的实现上没看出来有什么拆除堡垒的有效措施）在API设计上，dva-core差不多保持最小化了：一份model仅4个配置项 API屈指可数 hook差不多都是必须的...put({ type: SHOW, payload: { namespace, actionType } }); yield effect(...args); yield put(...围绕一个连接点的增强，如方法调用。这是最强大的一种增强类型。环绕增强可以在方法调用前后完成自定义的行为。...它也负责选择是继续执行连接点，还是直接返回它们自己的返回值或者抛出异常来结束执行（摘自AOP(Aspect-Oriented Programming)）这里的实际作用是onEffect把saga包一层

2.2K5 0

如何使用php调用api接口，获得返回json字符的指定字段数据

如何使用php调用api接口，获得返回json字符的指定字段数据今天试着用php调用远程接口，获取调用接口后的数据，将其记录下来，方便日后调用。...开始调用逻辑：先合并出需要调用的接口以及参数然后用php中file_get_contents()函数，获取接口返回的所有内容。...（这里调用接口，获得百度域名的备案主体的信息）。下面是输出的结果：下面是直接访问上方接口返回的内容最后，将上面的示例代码放出来。需要的可以免登录，下方评论拿走即可！

10.3K3 0

2021高频前端面试题汇总之React篇

HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。...在这里，"render"的命名可以是任何其他有效的标识符。...作为props传递给调用者，将渲染逻辑交给调用者。...rxjs和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏，min版25KB左右功能过剩: 实际上并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型.../actionTypes' import axios from 'axios' function* func(){ try{ // 可以获取异步返回数据 const

2.6K0 0

2022社招React面试题附答案

HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。...在这里，"render"的命名可以是任何其他有效的标识符。...作为props传递给调用者，将渲染逻辑交给调用者。...，Reducer会返回新的State State—旦有变化，Store就会调用监听函数，来更新View 以 store 为核心，可以把它看成数据存储中心，但是他要更改数据的时候不能直接修改，数据修改更新的角色由...rxjs和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏，min版25KB左右功能过剩: 实际上并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型

2.8K5 0

2021高频前端面试题汇总之React篇

HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。...在这里，"render"的命名可以是任何其他有效的标识符。...作为props传递给调用者，将渲染逻辑交给调用者。...，Reducer会返回新的State State—旦有变化，Store就会调用监听函数，来更新View 以 store 为核心，可以把它看成数据存储中心，但是他要更改数据的时候不能直接修改，数据修改更新的角色由...rxjs和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏，min版25KB左右功能过剩: 实际上并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型

2.8K0 0

一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

我们发现 Generator 函数的很多代码可以被延缓执行，也就是具备了暂停和记忆的功能：遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value...想象成开了一个以最快速度不断地调用 next 方法并尝试获取所有 yield 表达式值的线程。...action (使用刚才返回的 Promise.then) yield put(SHOW_DATA_ACTION, {data: data}); } 这里用了好几个yield，简单理解，也就是每个...yield 都发起了阻塞，saga 会等待执行结果返回，再执行下一指令。...也就是相当于take、put、call、put 这几个方法的调用变成了同步的，上面的全部完成返回了，才会执行下面的，类似于 await。

6.1K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭