通过redux操作对api进行异步调用不起作用 - 腾讯云开发者社区

文章/答案/技术大牛

发布

理解 React 中的 Redux-Thunk

下面我们来实操下：设置工作环境假设你已经通过 create-react-app 生成了一个 redux 项目，参考 React Js 中创建和使用 Redux Store。...通过 npm install redux-thunk --save 或者 yarn add redux-thunk 进行安装。...请注意，Reducer 是一个纯函数；因此它不能用于处理 API 调用。它不应该造成副作用，也不应该直接改变 state。在 React 中，你不应该直接更改 state。...return { ...state, zip: MOR0O0 } 为了让事情简单，Redux-thunk 是一个中间件，使用户能够使用异步函数代替 API 调用。...中间件可以帮助你进行日志记录、错误报告、异步请求等。

1.3K2 0

React---react-redux的使用

一、基本使用　　　 (1).明确两个概念： 1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。...this.props.xxxxxxx读取和操作状态三、数据共享 (1).定义一个Pserson组件，和Count组件通过redux共享数据。...四、react-redux开发者工具的使用　　 (1).npm install redux-devtools-extension (2).store中进行配置.../reducers' 9 //引入redux-thunk，用于支持异步action 10 import thunk from 'redux-thunk' 11 //引入redux-devtools-extension...action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。

2K3 0

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

是的

没有找到

精读《重新思考 Redux》

{}, reducers: { count }, middlewares: [api, devTools] }); 笔者注：redux 的初始化方式非常函数式，而下面的配置方式就更面向对象一些...effect action：处理异步场景，能调用其他 action，不能修改 store。...同步的场景，一个 reducer 函数就能处理，只有异步场景需要 effect action 处理掉异步部分，同步部分依然交给 reducer 函数，这两种 action 职责更清晰。...同时 redux 建议使用 payload key 来传值，那为什么不强制使用 payload 作为入参，而要通过 action.payload 取值呢？...reducers: { add(state) { state += 1; return state; } } }; 但是当 state 为非对象时，immer 将不起作用

6872 0

百度前端必会react面试题汇总

更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。...，在异步中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，去最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新合成事件中是异步钩子函数中的是异步原生事件中是同步...url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API监听 url 的变化可以通过自定义事件触发实现...4）监听数据变化的实现原理不同Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能React 默认是通过比较引用的方式进行的，如果不优化（...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的

2.2K1 0

社招前端一面react面试题汇总

下面是具体的 class 与 Hooks 的生命周期对应关系：constructor：函数组件不需要构造函数，可以通过调用 **useState 来初始化 state**。...，在异步中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，去最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新合成事件中是异步钩子函数中的是异步原生事件中是同步...setTimeout中是同步redux异步中间件之间的优劣？...redux-thunk缺陷：样板代码过多：与redux本身⼀样，通常⼀个请求需要⼤量的代码，⽽且很多都是重复性质的；耦合严重：异步操作与redux的action偶合在⼀起，不⽅便管理；功能孱弱：有⼀些实际开发中常...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的

4.1K2 0

06-React状态管理 Redux(工作流程, 核心概念, 求和案例, 异步Action, React-Redux, 多状态管理, 纯函数, 高阶函数, Redux开发者工具)

,以及它的使用情况, 我就不过多写概念了, 主要写使用方式 Redux工作流程三个核心概念 Action 动作对象包含两个属性字段作用数据类型是否唯一是否必填 type 标识属性字符串...,产生新的state subscribe(listener) listener对象注册监听,当产生新的state时,自动调用 Redux完整版对面上的案例进行改造新增常量constant.js...Action 在调用dispatch的时候传入的action对象, 如果对象是Object, 那么就是同步的action, 如果是函数, 那么就是异步的action 添加依赖 yarn add redux-thunk...会自动调用dispatch进行action分发优化Index组件 import React from 'react'; import ReactDOM from 'react-dom/client';.../person_reducer' // 用于支持异步Action import thunk from "redux-thunk"; // 引入Redux开发者工具 import {composeWithDevTools

2.5K2 0

Rematch: Redux 的重新设计

在 React 中，通过 context API 可以实现。大多数的状态都是存在于视图中的，因为它是用来反映用户界面的。那么，对于反映底层数据和逻辑的其它状态，又属于谁呢？...3.使用 Async/Await 代替 Thunks thunk 通常用于在 Redux 中创建异步 action。...2.effect action：触发异步 action，这可能会调用reducer操作，但异步函数不会直接更改任何状态。...Rematch 对 Redux 进行了封装，提供更简单的 API，但又不失任何可配置性的特点请参见下面的一个完整的 Rematch 示例：在过去的几个月里，我一直在实际业务中使用 Rematch。...Redux 与Rematch 作对比有助于让理解更加清晰。

2.1K5 0

React+Redux仿Web追书神器

中间件引人日志中间件 —— redux-logger，异步 API 调用 —— redux-thunk 等; component-module 和 components 存放的都是 react 组件，区别是...学习 Redux(搭建脚手架) API 数据数据来源主要是两个地方：一个是开源的Android项目与RN版本的数据，另一个是追书神器h5移动端数据跨域：网上查了不少方法，考虑到便捷，使用反向代理的方式处理...这里提下反向代理部分，关于使用 webpack-dev-server 进行配置反向代理的时候，如果使用 pathRewrite 到属性需要注意 webpack-dev-server 版本，这个属性是在...1.15.0 中，不然是不起作用的。...测试及优化现在项目代码是没有进行单元测试，后续学习集成JEST测试优化部分页面的组件以及一些 bugs

2K8 0

React saga_react获取子组件ref

redux-saga简介 Redux-saga是Redux的一个中间件，主要集中处理react架构中的异步处理工作，被定义为generator(ES6)的形式，采用监听的形式进行工作。...redux Effects Effect 是一个 javascript 对象，可以通过 yield 传达给 sagaMiddleware 进行执行在，如果我们应用redux-saga，所有的 Effect...这样既统一了action的形式，又使得异步操作集中可以被集中处理。 redux-saga是通过genetator实现的，如果不支持generator需要通过插件babel-polyfill转义。...products = yield call(Api.fetch, '/products') // ... } 上述代码中，比如我们需要测试Api.fetch返回的结果是否符合预期，通过调用call...通过转化effects函数，可以方便进行单元测试完善和严谨的流程控制，可以较为清晰的控制复杂的逻辑。

5.4K3 0

前端二面高频react面试题集锦_2023-02-23

此函数必须保持纯净，即必须每次调用时都返回相同的结果。 Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,...元素比对：主要发生在同层级中，通过标记节点操作生成补丁，节点操作对应真实的 DOM 剪裁操作。以上是经典的 React diff 算法内容。自 React 16 起，引入了 Fiber 架构。

3.5K2 0

前端模块化开发--React框架（四）：高级应用（redux）

: 对应用中状态进行集中式的管理(写/读) 开发: 与react-redux, redux-thunk等插件配合使用二、redux相关API redux中包含: createStore(), applyMiddleware...' // redux异步中间件 const store = createStore( counter, applyMiddleware(thunk) // 应用上异步中间件 ) 4、combineReducers...): 注册监听, 当产生了新的state时, 自动调用四、redux工作流程 ?...理解 1)一个react插件库 2)专门用来简化react应用中使用redux React-Redux将所有组件分成两大类 1)UI组件 Code a.只负责 UI 的呈现，不带有任何业务逻辑 b.通过...异步编程下载redux插件(异步中间件) shell npm install --save redux-thunk

1.6K2 0

redux-saga

()）分步执行通过iterator影响内部状态（iter.next(result)），注入异步操作结果利用iterator的错误捕获特性（iter.throw(error)），注入异步操作异常用generator...形式提供，提供各种语义的用来生成Effect的工具函数，例如把dispatch action包装成put、把方法调用包装成call/apply Effect -> 业务操作在执行时内部进行转换，例如把...[Effect1, Effect2]转换为并行调用类似于装箱（把业务操作用Effect包起来）拆箱（执行Effect里的业务操作），此外，完整的redux-saga还要实现：作为middleware...常用的Effect creator如下：阻塞型方法调用：call/apply 详见Declarative Effects 非阻塞型方法调用：fork/spawn 详见redux-saga’s fork...all/race进行组合 Saga Helpers Saga Helper用来监听action，API形式是takeXXX，其语义相当于addActionListener： take：语义相当于once

2.4K4 1

前端常见react面试题合集

更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。...Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。...库内部源码非常的简单，允许action是一个函数，同时支持参数传递，否则调用方法不变redux创建Store：通过combineReducers函数合并reducer函数，返回一个新的函数combination...可以使用自定义事件通信（发布订阅模式）可以通过redux等进行全局状态管理如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。...act（）也支持异步函数，并且你可以在调用它时使用 await。使用进行性能评估。

3.2K3 0

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

显然，大多数的异步任务都需要和外部世界进行交互，不管是发起网络请求、访问本地文件或是数据库等等，因此，它们都会产生“副作用”。 3.什么是redux-saga？...上一篇我们介绍过Redux的中间件，说白了就是在action被传递到reducer之前新进行了一次拦截，然后启动异步任务，等异步任务执行完成后再发送一个新的action，调用reducer修改状态数据。...redux-saga的功能也是一样的，参见下图：左边的蓝圈圈里就是一堆saga，它们需要和外部进行异步I/O交互，等交互完成后再修改Store中的状态数据。...你必须要通过迭代器的next()函数才能执行第1个yield后面的step1()函数： var it = mySaga(value0) it.next() 另外，当step1()执行完异步任务后，需要再次调用...然后我们看下workerSaga，可以看到并不是直接调用异步函数或者派发action，而是通过call()以及put()这样的函数。这就是redux-saga中最为重要的一个概念：Effect。

2.2K3 0

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

云函数：可以用 Node.js 进行开发，自己编写对应的后端逻辑，并把写好的代码传到云端，然后在小程序前端使用 API 进行调用。...序号3是云函数，即我们可以在这里面管理一些我们编写的的后端 Node.js 逻辑，它运行在云中，我们可以在小程序端通过 API 来调用它们。...序号4是代表我们此次的云环境的标识符，可以用于在小程序端以 API 调用云开发资源时标志此时的调用的云环境。在本篇教程中，我们会用到上面提到的数据库和云函数两项功能。...在 try 语句中，首先是使用了 redux-saga 提供给我们的 effects helper 函数：call 来调用登录的 API：userApi.login，并把 userInfo 作为参数传给这个...的方式来调用 login API 处理登录逻辑了。

2.8K2 0

redux-saga学习

如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。...redux-saga redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk...sagas监听发起的action，然后决定基于这个action来做什么 (比如：是发起一个异步请求，还是发起其他的action到store，还是调用其他的sagas 等 ) 在redux-saga的世界里...，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 ) redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects...（Generator可以通过next查看每一步的调用结果） Hello redux-saga 主要根据官方案例构建初始化项目 1.克隆教程仓库 git clone

3.4K1 0

react脚手架改造(reactreact-routerreduxeslintkaramimmutablees6webpackRedux DevTools)

加入immutable 加入这个看个人意愿，加入之后必定会造成一定的学习以及开发成本，但是对redux来说，运用这个库是再好不过的了，具体表现在数据的不可变性，即每次的数据都会是一个新的，不会在原始引用的数据上进行重新操作...运行完成后，你可能会得到这样的截图，如果有error，编译将不能通过。...Actions支持，并配置全局状态在middlewares/apiMiddleware.js中使用axios进行接口请求，支持GET/POST，另支持jsonp方式，只需要如下调用即可： //...改造reducers的处理引入了redux-actions库，其中对reducers的处理进行了很好的封装。...而不是单调的使用switch/case来进行匹配，中间运用到了扁平化reducers以及我之前在深入redux中间件一文中的reduce函数。

2.1K5 0

ReactNative之Redux详解

从这一点来看，redux可以很好的解决一个页面中多个模块间的状态共享的问题。 Redux这框架理解起来是比较简单的，这个框架本身也是比较小的，涉及的API也非常少。虽然小，但小而精。...二、通过加减法示例来看Redux的使用方式下方通过一个简单的加减法程序来看一下Redux的使用方式。...1、创建Store 首先创建Store，redux 专门提供了一个创建store的方法 createStore ，调用 createStore 时，我们需要把修改State的Reducer方法传进去进行关联...State被修改后，可以通过 Store 中的 subscribe 的方法进行监听该状态的改变。 ?...如果是Add, 就会调用addTowNumber方法创建一个加法动作对应的Action。如果是减法操作的话，则会调用 descTowNumber()方法创建一个减法对应的Action对象。

1.8K1 0

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

通过 redux-thunk 中间件，我们可以把异步过程通过函数的形式放在 dispatch 的参数里： const login = (userName) => (dispatch) => { dispatch...({ type: 'loginStart' }) request.post('/api/login', { data: userName }, () => { dispatch({ type...redux saga 的异步过程管理就是这样的：先把 action 透传给 store，然后判断 action 是否是被 taker 监听的，如果是，则调用对应的 worker saga 进行处理。...action$, state$) => action$.pipe( ofType('FETCH_USER'), mergeMap(({ payload }) => ajax.getJSON(`/api...不管是 redux-saga 通过 generator 来组织异步过程，通过内置 effect 来处理多个异步过程之间的关系，还是 redux-observable 通过 rxjs 的 operator

2.9K1 0

前端高频react面试题

如何解决 props 层级过深的问题使用Context API：提供一种组件之间的状态共享，而不必通过显式组件树逐层传递props；使用Redux等状态库。React Hook 的使用限制有哪些？...如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；最好的办法应该是获取到多个更新，之后进行批量更新；如果同步更新了state，但是还没有执行...url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API监听 url 的变化可以通过自定义事件触发实现...redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable

4.6K2 0

点击加载更多

理解 React 中的 Redux-Thunk

React---react-redux的使用

精读《重新思考 Redux》

百度前端必会react面试题汇总

社招前端一面react面试题汇总

06-React状态管理 Redux(工作流程, 核心概念, 求和案例, 异步Action, React-Redux, 多状态管理, 纯函数, 高阶函数, Redux开发者工具)

Rematch: Redux 的重新设计

React+Redux仿Web追书神器

React saga_react获取子组件ref

前端二面高频react面试题集锦_2023-02-23

前端模块化开发--React框架（四）：高级应用（redux）

redux-saga

前端常见react面试题合集

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

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

redux-saga学习

react脚手架改造(reactreact-routerreduxeslintkaramimmutablees6webpackRedux DevTools)

ReactNative之Redux详解

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

前端高频react面试题

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐