开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Redux saga put推送未更改位置

Redux Saga是一个用于管理应用程序副作用（例如异步请求和数据获取）的库。它是Redux的中间件，可以帮助开发人员更好地处理应用程序的副作用逻辑。

在Redux Saga中，put是一个用于触发Redux action的Effect。它用于将一个action放入Redux的dispatch流程中，以便触发相应的reducer进行状态更新。

在推送未更改位置的情况下，可能是因为在Saga中使用了put来触发了一个action，但该action并没有导致状态的实际更改。这可能是因为在reducer中没有对该action进行处理，或者在处理该action时没有对状态进行修改。

在这种情况下，可以考虑以下几点来解决问题：

检查Saga中的put语句：确保put触发的action在reducer中有相应的处理逻辑，并且能够对状态进行实际的更改。
检查reducer中的处理逻辑：确认在处理相应的action时，是否正确地对状态进行了修改。可以通过在reducer中打印日志或使用调试工具来检查状态的变化。
检查action的定义和使用：确保在定义action时，其type属性与reducer中的处理逻辑一致。同时，在Saga中使用put触发action时，检查传递给put的action对象是否正确。
检查Saga的执行流程：确认Saga是否按照预期的顺序执行，并且没有其他副作用干扰了put触发的action的处理。

总之，推送未更改位置的问题可能是由于Saga中的put触发的action没有正确地在reducer中进行处理，或者在处理该action时没有对状态进行实际的更改。通过仔细检查Saga、reducer和action的定义和使用，可以解决这个问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:git推送用户id未更改 React Grid Redux Integration redux状态在网格更改时未更新 React Native Redux: this.setState未更改状态 React Redux在数据更改后未呈现 Redux saga函数在第一次尝试时未运行 redux saga未执行 Redux ToolKit中的派单未更改状态 redux-actions handleActions未更改状态 Redux-saga yield在catch块中的put()未执行 redux状态更改后componentDidUpdate未触发

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React-Redux-Saga

Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga在创建 store 时应用 redux-saga...中间件，更改 store.jsimport {createStore, applyMiddleware} from 'redux'/*注意点: 如果导入的是redux-thunk, 那么返回给我们的是一个中间件对象...put} from 'redux-saga/effects'import {GET_USER_INFO} from '....中保存是通过 Saga 提供的 put 方法进行添加即可，在更改 store.js 告诉 saga 中间件的生成器哪些通过 dispatch 派发的 action 需要进行拦截, 在 run 方法进行指定

1843 0

Redux 异步解决方案2. Redux-Saga中间件

否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用安装: yarn add redux-saga store.js import { createStore...from 'redux-saga'; // 导入创建saga的函数 import {add, deleter} from '....sagaMiddleware.run(watch); Saga/saga.js import { call, // 调用一个函数 put, take, select,...解释: put函数相当于redux的dispatch 当put一个action后。.... yield select(state => state.getTodoList.list) 可以通过函数返回值更改值 all 解释: yield all([call(1), call(2)]) 相当于

1K2 0

简析redux技术栈(二)：认识saga的buffer和chanel

本文地址我们知道redux-saga 也是通过中间件的形式与 redux 本身连接起来。...例如下面使用了redux-saga的react项目需要以下这样的初始化 function configureStore(initialState) { // 运行返回一个redux middleware...的第一步，就从 redux-saga 的中间件开始。...return sagaMiddleware; } 在了解 saga 的运行机制之前，先学习 redux-saga 源码内部的两个比较常用的数据结构buffer和chanel。...通过pushIndex和popIndex标识位来记录出入队列的位置，它们的初始值都是 0，出队列的时候直接把popIndex位置空，然后值+1。入队列则是pushIndex+1。

1.1K1 0

redux-saga入门

文章目录资料 redux-saga简介常用API takeLatest takeEvery take delay put call fork cancel all 案例1：错误处理了案例2：错误未处理...sagas.js文件 import { all, put, takeEvery } from 'redux-saga/effects' function* increment() {...Effects是一些简单对象，如下put({ type: ‘increment’ })，我们使用redux-saga提供的put方法创建一个Effect对象。...如果直接打印Effect： console.log(put({ type: 'increment' })); 在 redux-saga 的世界里，Saga 都用 Generator 函数实现...import { put, delay } from 'redux-saga/effects' function* increment() { yield put({ type: 'increment

1.3K2 0

redux-saga

作为一个Redux中间件，想让Redux应用中的副作用（即依赖/影响外部环境的不纯的部分）处理起来更优雅二.设计理念 Saga像个独立线程一样，专门负责处理副作用，多个Saga可以串行/并行组合起来，...还要实现：作为middleware接入到Redux 提供读/写Redux state的接口（select/put）提供监听action的接口（take/takeEvery/takeLatest） Sagas...error的传递方式，所以如果任一task有未捕获的error，当前saga也会结束另外，cancel机制比较有意思：对于执行中的task序列，所有task自然完成时，把结果向上传递到队首，作为上层某个...术语Saga指的是一系列操作的集合，是个运行时的抽象概念 redux-saga里的Saga形式上是generator，用来描述一组操作，而generator是个具体的静态概念 P.S.redux-saga...里所说的Saga大多数情况下指的都是generator形式的一组操作，而不是指redux-saga自身。

1.9K4 1

react项目架构之路初探

技术的选型项目主要使用了redux，react-redux，redux-saga，seamless-immutable，reduxsauce。...（Effect 可以看作是 redux-saga 的任务单元）。.../saga' // 引入saga中相关组件 import createSagaMiddleware from 'redux-saga' // 引入react-redux相关组件使redux和react...写法 // 引入 redux-saga中引入effect import {call, put, take, fork, takeEvery, select} from 'redux-saga/effects...image 参考文献 React+Redux-Saga+Seamless-Immutable+Reduxsauce后台系统搭建之路 reduxsauce npm地址 redux-saga中文 redux-saga

2.4K1 0

React saga_react获取子组件ref

触发某个action，作用和dispatch相同： yield put({ type: 'CLICK' }); 具体的例子： import { call, put } from 'redux-saga...yield take(['LOGOUT', 'LOGIN_ERROR']) redux-saga使用案例引入saga: import { call, put, take, select } from...首先，在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。...yield call(fetch,'/userInfo',username) put 在前面提到，redux-saga做为中间件，工作流是这样的： UI——>action1————>redux-saga...相应的这里的put对应与redux中的dispatch，工作流程图如下：从图中可以看出redux-saga执行副作用方法转化action时，put这个Effect方法跟redux原始的dispatch

4.5K3 0

Redux：从action到saga

这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式（超时，API调用等等。。）...我们来看看用saga代替action creator获取todo数据的方法：import { call, put } from 'redux-saga'; function* loadTodos()...在上面的例子中我用了两种副作用：一个put副作用，它会给redux store分发一个action。一个call副作用，它会执行一个异步的方法（promise，cps后者其他的saga）。...现在，测试这个saga就非常的容易了： import { call, put } from 'redux-saga'; const mySaga = loadTodos(); const myTodos...看代码： import { fork, take } from 'redux-saga'; function* loadTodos() { yield put({ type: 'FETCHING_TODOS

1.2K0 0

redux-saga学习

redux-saga redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk..."; import { put,takeEvery,all } from "redux-saga/effects"; function* helloSaga(){ console.log('hello...redux-saga 使用 PUT 来描述dispatch 一个 action 到 Store 而不是直接dispatch action 的原因也是为了方便测试。...import { call,put } from "redux-saga/effects"; function * incrementAsync(){ yield call(delay,1000...import { take, put, call, fork, cancel } from 'redux-saga/effects' // ... function* loginFlow() {

2.7K1 0

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

redux-saga redux-saga 并没有改变 action，它会把 action 透传给 store，只是多加了一条异步过程的处理。...put({ type: 'loginError', error }) } } function* logout() { yield put({ type: 'logoutSuccess'})...worker saga 只是告诉了 task 应该做什么处理，通过 call、fork、put 这些命令（这些命令叫做 effect）。...但是 redux-saga 的优点还有基于 generator 的良好的可测试性，而且大多数场景下，redux-saga 提供的异步过程的处理能力就足够了，所以相对来说，redux-saga 用的更多一些...worker saga 可以用 put、call、fork 等 effect 来描述不同的副作用，由 task 负责执行。

2.4K1 0

手写Redux-Saga源码

可以看到Redux-Saga这种机制也是用takeEvery先注册回调，然后使用put发出消息来触发回调执行，这其实跟我们其他文章多次提到的发布订阅模式很像。...并执行，如果遇到take就将它注册到channel上去，如果遇到put就将对应的回调拿出来执行，但是Redux-Saga又将这个过程分为了好几层，我们一层一层来看吧。...再来回顾下他的主要要点： Redux-Saga其实也是一个发布订阅模式，管理事件的地方是channel，两个重点API：take和put。...put是发出事件，他是使用Redux dispatch发出事件的，也就是说put的事件会被Redux和Redux-Saga同时响应。...Redux-Saga增强了Redux的dispatch函数，在dispatch的同时会触发channel.put，也就是让Redux-Saga也响应回调。

1.7K3 0

React之redux学习日志（reduxreact-reduxredux-saga）

Redux-Saga中间件 redux-saga中文文档地址：https://redux-saga-in-chinese.js.org/docs/basics/DeclarativeEffects.html...当我们需要执行一些异步操作时，由于action中只能返回一个对象，从而需要借助一些中间件来达到目的，redux-thunk 和 redux-saga是常见的两种中间件。　　.../sagas"; import createSagaMiddleware from "redux-saga"; // 创建 redux-saga 中间件 const sagaMiddleware =...redux-saga中有很多声明 effects 函数（比如：call、put、takeEvery、all、fock等等），具体请查阅redux-saga文档。...备注：redux-saga函数必须是一个Generator函数拓展：还可以通过以下代码来将saga进行模块化： import { all, fork } from 'redux-saga/effects

5343 0

redux-sage笔记

也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...以下是一些saga的常用方法 redux/saga takeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts) 每当有PRODUCTS_REQUESTED...) takeEvery('\*', function * xx(){/\** ***/})表示匹配所有的action takeLatest 只执行最新的任务，之前如果有正在执行的任务则会被取消 redux-saga...} from 'redux-saga/effects' import Api from '...'...未被捕获的话，这个错误是不会向上冒泡的使用redux-saga来处理一些复杂的流程的时候似乎比较不错

7043 0

redux-saga_pub culture

本文用以记录从调研Redux Saga，到应用到项目中的一些收获。...项目链接： https://github.com/fanxiao168/React-todoList 什么是Redux Saga 官网解释来自：https://github.com/redux-saga.../redux-saga redux-saga is a library that aims to make side effects (i.e. asynchronous things like data...sagas.js import { takeEvery ,put } from 'redux-saga/effects'; import { GET_INIT_LIST } from '....put方法 put就是redux的dispatch，用来触发reducer更新store 有什么弊端目前在项目实践中遇到的一些问题： redux-saga模型的理解和学习需要投入很多精力因为需要用

1.4K1 0

使用hooks重新定义antd pro想象力（一）

1 react生态中，antd pro占据重要的位置。非常多的团队使用其来完成自己的中后台应用。...它的核心数据处理方案dva聚合了react-redux, redux-saga，极大的降低了redux使用的复杂度。因此使用antd pro无疑是一个非常好的方案。但是！...例如：接口请求的异常处理被封装成公共逻辑，未做差异化处理 /** * 配置request请求时的默认参数 */ const request = extend({ errorHandler, /...*fetchUserCurrent(_, { call, put }) { const response = yield call(queryCurrent); yield put({...type: 'save', payload: { currentUser: response, }, }); }, 一些地方官方也没有找到合适的实践方案，例如在redux-saga

4.1K2 0

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

redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...（1）使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga...⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga...} from 'redux-saga/effects' import {initTodoList} from '....但是Redux状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生，完整的提供了一套状态管理模式。

2K0 0

2022社招React面试题附答案

redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...（1）使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga...⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga...} from 'redux-saga/effects'import {initTodoList} from '....但是Redux状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生，完整的提供了一套状态管理模式。

2K5 0

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

处理异步对于异步操作来说，有两个非常关键的时刻：发起请求的时刻，和接收到响应的时刻（可能成功，也可能失败或者超时），这两个时刻都可能会更改应用的 state。...举个例子： // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...也就是相当于take、put、call、put 这几个方法的调用变成了同步的，上面的全部完成返回了，才会执行下面的，类似于 await。...对比 Redux-thunk 比较一下 redux-thunk 和 redux-saga 的代码：和 redux-thunk 等其他异步中间件对比来说，redux-saga 主要有下面几个特点：...之前我们聊了 redux、react-redux、redux-saga 之类的概念，大家肯定觉得头昏脑涨的，什么 action、reducer、saga 之类的，写一个功能要在这些js文件里面不停的切换

5.4K1 0

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

3.什么是redux-saga？ redux-saga是一个Redux中间件，用来帮你管理程序的副作用。或者更直接一点，主要是用来处理异步action。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...这在redux-saga中被称为worker saga和watcher saga： worker saga：具体业务逻辑实现 watcher saga：接收特定的action，然后驱动worker...然后我们看下workerSaga，可以看到并不是直接调用异步函数或者派发action，而是通过call()以及put()这样的函数。这就是redux-saga中最为重要的一个概念：Effect。...from 'redux-saga' import reducer from '.

1.7K3 0

dva

简言之：dva想提供一个基于业界react&redux最佳实践的业务框架，以解决用裸redux全家桶作为前端数据层带来的种种问题编辑成本高，需要在reducer, saga, action之间来回切换...依赖关系 dva react react-dom dva-core redux redux-saga history react-redux react-router-redux...subscriptions // redux-saga里的sagas effects // redux里的reducer reducers }; dva-core实际所作的主要工作是从...model配置得到reducers，worker sagas, states后，屏蔽接下来的一系列繁琐工作：接redux（组合state，组合reducer）接redux-saga（完成redux-saga...和redux，靠redux中间件机制把redux-saga拉进来一起玩）到这里差不多封装好了，那么，下面开一些口子增加一点灵活性：递出一堆钩子（effect/reducer/action/state

1.9K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭