为什么如果我没有正确处理fetch api的结果，那么fetch就会出错。使用redux-thunk - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Redux 入门教程（二）：中间件与异步操作

上一篇文章，我介绍了 Redux 的基本做法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是，一个关键问题没有解决：异步操作怎么办？...有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。...这时，就要使用中间件redux-thunk。...因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。...；如果 Action 对象的payload属性是一个 Promise 对象，那么无论 resolve 和 reject，dispatch方法都会发出 Action。

2.1K4 0

深入学习 Redux 之中间件与异步操作

有的中间件有次序要求，使用前要查一下文档。比如，logger 就一定要放在最后，否则输出结果会不正确。..."操作结束" 状态，View 再一次重新渲染五、redux-thunk 中间件 ---- 异步操作至少要送出两个 Action：用户触发第一个 Action，这个跟同步操作一样，没有问题；如何才能在操作结束时...这时，就要使用中间件 redux-thunk。...因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用 redux-thunk 中间件改造 store.dispatch。...以后不会有任何动作；如果 Action 对象的 payload 属性是一个 Promise 对象，那么无论 resolve 和 reject，dispatch 方法都会发出 Action。

1.4K2 0

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

是的

没有找到

React saga_react获取子组件ref

但是如果存在副作用，比如ajax异步请求等等，那么应该怎么做？如果存在副作用函数，那么我们需要首先处理副作用函数，然后生成原始的js对象。...和调用redux的其他中间件一样，如果想使用redux-saga中间件，那么只要在applyMiddleware中调用一个createSagaMiddleware的实例。..., '/products') // ... } 上述代码中，比如我们需要测试Api.fetch返回的结果是否符合预期，通过调用call方法，返回一个描述对象。...不需要模拟Api.fetch函数的具体返回结果。...put的使用方法： yield put({type:'login'}) select put方法与redux中的dispatch相对应，同样的如果我们想在中间件中获取state，那么需要使用select

5.4K3 0

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

如果不对状态进行有效的管理，状态在什么时候，由于什么原因，如何变化就会不受控制，就很难跟踪和测试了。如果没有经历过这方面的困扰，可以简单理解为会搞得很乱就对了。...为了简单处理 Redux 和 React UI 的绑定，一般通过一个叫 react-redux 的库和 React 配合使用，这个是 react 官方出的（如果不用 react-redux，那么手动处理...如果使用 Dva，那么结构图如下：整个结构变化不大，最主要的就是把 store 及 saga 统一为一个 model 的概念（有点类似 Vuex 的 Module），写在了一个 js 文件里。...，增强业务的可预测性；MobX 没有那么自然的数据流动，也没有时间回溯的能力，但是 View 更新很精确，粒度控制很细。...如果项目比较小的话，使用 MobX 会比较灵活，但是大型项目，像 MobX 这样没有约束，没有最佳实践的方式，会造成代码很难维护，各有利弊。

6.1K1 0

应用connected-react-router和redux-thunk打通react路由孤立

值得注意的是 React 16.3 带来了全新的Context API，我们也可以使用新的 Context API 做状态管理。...在使用一些 redux 的connect()或者 mobx的inject()的组件中，如果依赖于路由的更新要重新渲染，会出现路由更新了但是组件没有重新渲染的情况。...） )); 如果你没有包含其它增强器和中间件的话，只需要使用devToolsEnhancer import { createStore } from 'redux'; import { devToolsEnhancer...如果你用的是create-react-app，那么它已经帮你配置好了如果你在创建store时检查过process.env.NODE_ENV，那么也包括了生产环境的redux-devtools-extension...如果你有任何想法欢迎直接「留言」与我交流，那将是我进步的动力！

3K0 0

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

既然你读到这里，我认为你真想学习 Redux，我不会在这里比较 Redux 和 Context API 或者使用 Context 和使用 Reducer Hooks。...如果你想深入研究 Context API，看我在 egghead 的课程 React Context 状态管理其他替代品：使用 children Prop 取决于你构建应用程序的方式，你可能会用更直接的方式把数据传递给子组件...如果你有一个函数会为你编写它会怎么样？不要再误写 actinos 了！我可以告诉你，这很疯狂。手写 { type: INCREMENT } 并保证没有弄乱有多困难？...这是另一层的抽象，如果你不想在你的应用里面使用，那也没关系。不过我还是会解释下它们是什么。然后你可以决定你是否有时/总是/绝不想使用它们。...而且：你肯定会在这里出错并且非常困惑。至少一次，或许很多次。那很正常。我有时也依旧会忘记。

5K2 0

状态管理的概念，都是纸老虎

如果不对状态进行有效的管理，状态在什么时候，由于什么原因，如何变化就会不受控制，就很难跟踪和测试了。如果没有经历过这方面的困扰，可以简单理解为会搞得很乱就对了。...为了简单处理 Redux 和 React UI 的绑定，一般通过一个叫 react-redux 的库和 React 配合使用，这个是 react 官方出的（如果不用 react-redux，那么手动处理...如果使用 Dva，那么结构图如下： ? 整个结构变化不大，最主要的就是把 store 及 saga 统一为一个 model 的概念（有点类似 Vuex 的 Module），写在了一个 js 文件里。...，增强业务的可预测性；MobX 没有那么自然的数据流动，也没有时间回溯的能力，但是 View 更新很精确，粒度控制很细。...如果项目比较小的话，使用 MobX 会比较灵活，但是大型项目，像 MobX 这样没有约束，没有最佳实践的方式，会造成代码很难维护，各有利弊。

5.8K2 0

Fetch还是Axios——哪个更适合HTTP请求？

如果你想在函数中使用 POST 方法，那么只需使用 .post() 方法代替，并将请求数据作为参数传递即可。...在一个较大的项目中，如果你创建了大量的调用，那么使用 axios 来避免重复代码会更舒服。错误处理在这一点上，我们还需要给 axios 点赞，因为处理错误是非常容易的。...，如果响应有状态 ok，那么我就可以处理并使用 .json() 方法，但如果没有，我必须在 .then() 里面返回错误。...为了方便和正确的错误处理，对于你的项目来说，axios 绝对会是一个更好的解决方案，但如果你正在构建一个只有一两个请求的小项目，使用 .fetch() 是可以的，但你需要记住正确处理错误。...如果你有大量的大数据要下载，你想跟踪进度指标的进度，你可以用 axios 来管理，更容易更快，但 .fetch() 也提供了这种可能性，只是它需要更多的代码来开发同样的结果。

6.8K2 0

深入Redux架构

用户的使用方式复杂不同身份的用户有不同的使用方式（比如普通用户和管理员）多个用户之间可以协作与服务器大量交互，或者使用了WebSocket View要从多个来源获取数据简单说，如果你的UI层非常简单...如果使用的是 React，这时可以触发重新渲染 View。...这时，就要使用中间件redux-thunk。...实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。...只负责 UI 的呈现，不带有任何业务逻辑没有状态（即不使用this.state这个变量）所有数据都由参数（this.props）提供不使用任何 Redux 的 API 下面就是一个 UI 组件的例子

2.9K6 0

React-Redux-Saga

中间件，更改 store.jsimport {createStore, applyMiddleware} from 'redux'/*注意点: 如果导入的是redux-thunk, 那么返回给我们的是一个中间件对象...redux-thunk, 那么在创建store的时候指定完中间件即可如果是redux-saga, 那么除了需要在创建store的时候指定中间件以外, 还需要手动的调用中间件的run方法才行...就会被完整的执行 3 次，那么对于 takeLatest 而言, 如果派发下一次同类型 action 的时候，上一次派发的 action 还没有处理完, 也就是上一次的监听方法还没有处理完，那么 takeLatest...(博主所说的是：如果派发下一次同类型 action 的时候，上一次派发的 action 还没有处理完, 也就是上一次的监听方法还没有处理完)如果我们只需要保存一个数据, 那么直接通过 yield put...，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。

8473 0

Redux：从action到saga

但是当需要处理异步的action（在函数式编程里称为副作用）的时候事情就没有这么简单了。为了解决这个问题，redux建议使用中间件（尤其是thunk）。...基本上，如果你需要出发副作用（side effects），使用一种特定的action生成方法：一种返回一个方法的方法，可以实现任意的异步访问并分发任意你想要的action。...使用这个方式会很快导致action生成方法变得复杂并难以测试。这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式（超时，API调用等等。。）...(put({ type: 'FETCH_TODOS', payload: myTodos })); 触发一个saga thunk的action creator在分发它返回的方法的时候就会触发。...在之前的例子里，loadTodos saga在一开始就会触发。但是，如果我们想要每次一个action分发到store的时候触发saga要怎么做呢？

1.5K0 0

React-Redux-thunk

在 Redux 中获取网络数据使用 redux-thunk 中间件redux-thunk 作用默认情况下 dispatch 只能接收一个对象, 使用 redux-thunk 可以让 dispatch 除了可以接收一个对象以外...使用 redux-thunk安装 redux-thunknpm install redux-thunk在创建 store 时应用 redux-thunk 中间件修改 store.js：import {createStore...dispatch 方法除了可以接收一个对象以外, 还可以接收一个方法, 那么我们可以使用 redux-thunk 中间件, redux-thunk 中间件的作用，可以让 dispatch 方法可以接收一个函数...总结使用 redux-thunk 之前的流程 -------------------- ------> | Component 异步请求 | -----...，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。

7002 0

redux 文档到底说了什么（下）

: {}} 结构使用 redux-thunk 来做异步，手动返回函数手动使用表驱动来替换 reducer 的 switch-case 模式手动将 selector 进行封装成函数手动引入 immer...直接使用字符串来 dispatch 是非常容易出错的，而且对 TS 非常不友好。...typing.d.ts，使用这些 API 就跟切菜一样简单，还要这个皮 redux 文档有个儿用。...createAction 没有说。...没有说的原因是 createReducer + createAction 约等于 createSlice。

1.1K2 0

手写Redux-Saga源码

本文要讲的就是Redux-Saga，这个也是我在实际工作中使用最多的Redux异步解决方案。...Redux-Saga比Redux-Thunk复杂得多，而且他整个异步流程都使用Generator来处理，Generator也是我们这篇文章的前置知识，如果你对Generator还不熟悉，可以看看这篇文章...这样我们的reducer就可以拿到FETCH_USER_SUCCEEDED进行处理了，跟以前的reducer并没有太大区别。...fork的使用跟call很像，也是可以直接调用传进来的方法，只是call会等待结果回来才进行下一步，fork不会阻塞这个过程，而是当前结果没回来也会直接运行下一步： fork(fn, ...args);...但是如果你使用Redux-Saga的effect，每次你代码运行的时候得到的都是一个任务描述对象，这个对象是稳定的，不受运行结果影响，也就不需要针对这个造测试数据了，大大减少了工作量。

2.1K3 0

撸了一个 B 站...

我是前端实验室的小师妹!...最近逛 Github 又发现一个强大的开源学习项目：高仿B站移动端该项目基于此SSR服务端渲染模板，前端技术使用 React16.8，Typescript 开发~ 技术栈 react react-router-dom...(代码分割) cross-fetch(浏览器和node通用的Fetch API) express(后端服务) 实现功能效果预览 >> >> 项目部署下载项目，先运行服务端接口，接口见 bilibili-api目录。...如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~

4475 0

Redux-Thunk中间件

我们都知道，在使用redux的时候，通过dispatch一个action 发生到reducer 然后传递给store修改状态一系列都是同步的，那如果说我dispatch一个action 这个action...帮我请求一下接口数据，你发现接口请求是异步的，没有办法等接口数据返回再传递给reducer 这个时候中间件就产生啦。...可以将 thunk 看做 store 的 dispatch() 方法的封装器；我们可以使用 thunk action creator 派遣函数或 Promise，而不是返回 action 对象。...例如：正常请求接口完再使用dispatch去修改状态。但是如果想在dispath -> action里面执行异步操作就需要thunk 注意，没有 thunk 的话，默认地是同步派遣。...redux-thunk 使用实例: 首先安装：yarn add redux-thunk store.js import { createStore, combineReducers, applyMiddleware

1.6K2 0

React 没有中间件还能用吗？

传入方法时, 函数里面并未对里面做什么处理. function createStore(reducer, preloadedState, enhancer) { // 这里就是一些列条件判断, 如果你使用...middle 是上面的形式,那么就会直接将参数赋给 enhancer if (typeof preloadedState === 'function' && typeof enhancer ===...结合在一起使用的。...他的最终结果是，针对不同 reducers 返回的结果，一般只能影响到本 reducers 里面的内容。...redux-thunk 可以实现私有, 定制化的中间件操作.

1.7K2 0

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

那么如果想在到达 store 之前多做一些处理呢？在哪里加？改造 dispatch！中间件的原理就是层层包装 dispatch。...，takeLatest 会对多个 action 的最后一个做处理，race 会只返回最快的那个异步过程的结果，等等。...这些控制多个异步过程之间关系的 effect 正是 redux-thunk 所没有的，也是复杂异步过程的管理必不可少的部分。...(({ payload }) => ajax.getJSON(`/api/users/${payload}`).pipe( map(response => ({ type: 'FETCH_USER_FULFILLED...redux-thunk 并没有提供多个异步过程管理的机制，复杂异步过程的管理还是得用 redux-saga 或者 redux-observable。

2.9K1 0

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

fetch 来调用后台接口，与真实的项目没有差异。...组合好参数并调用对应的 api 层。如果正常返回结果，则发送成功 action 通知 reducer 更新状态。如果错误返回，则发送错误 action 通知 reducer。...这也是我选择 redux-saga 的原因：强大并且利于测试。 api 和 fetch 工具库接下来就是api 层相关的了。...前面讲过调用后台请求是用的 fetch ，我封装了两个方法来简化调用和结果处理：getJSON() 、 postJSON() ，分别对应 GET 、POST 请求。...接着就是测试自己封装的 fetch 工具库了，这里 fetch 我是用的 isomorphic-fetch ，所以选择了 nock 来模拟 Server 进行测试，主要是测试正常访问返回结果和模拟服务器异常等

3.6K3 0

JavaScript进阶 - AJAX请求与Fetch API

随着技术的发展，Fetch API应运而生，提供了一种更简洁、更现代的方式来处理AJAX请求。本文将深入浅出地介绍AJAX请求与Fetch API的使用，包括常见问题、易错点以及如何避免它们。...XMLHttpRequest的局限性XMLHttpRequest是早期实现AJAX的常用方法，但它有以下局限性：复杂的API：XMLHttpRequest的API较为复杂，使用起来容易出错。...确保服务器设置了正确的CORS头部。默认不发送Cookie：默认情况下，Fetch API不会发送Cookie。如果需要发送Cookie，需要在请求选项中设置credentials属性。...然而，在使用Fetch API时，需要注意检查HTTP状态码、正确处理错误、处理跨域请求问题、发送Cookie以及实现请求超时等常见问题。...通过遵循最佳实践，可以更有效地使用Fetch API，提高Web应用的开发效率和用户体验。

7291 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭