首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么这个Redux Saga选择器不工作?我似乎无法访问状态

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

在Redux Saga中,选择器是用于从Redux状态树中获取特定数据的函数。选择器可以帮助我们在应用程序中获取和处理状态,以便在UI组件中使用。

如果Redux Saga选择器不工作,可能有以下几个原因:

  1. 选择器代码错误:首先,需要检查选择器的代码是否正确。确保选择器函数正确地从状态树中获取数据,并返回所需的结果。可以通过在控制台打印选择器的输出来进行调试。
  2. 状态未正确更新:如果选择器无法访问状态,可能是因为状态未正确更新。在Redux中,状态是通过分发动作来更新的。确保在需要更新状态的地方正确地分发了相应的动作。
  3. Saga未正确处理动作:Redux Saga使用生成器函数(Generator Function)来处理异步操作。如果选择器无法访问状态,可能是因为相关的Saga未正确处理相应的动作。确保Saga正确监听并处理与选择器相关的动作。
  4. 异步操作未完成:如果选择器依赖于异步操作的结果,而异步操作尚未完成,那么选择器可能无法访问状态。确保异步操作已经完成,并且选择器在异步操作完成后再次调用。

总结起来,当Redux Saga选择器不工作时,需要检查选择器代码是否正确、状态是否正确更新、Saga是否正确处理动作以及异步操作是否完成。通过逐步排查这些可能的原因,可以解决选择器无法访问状态的问题。

关于Redux Saga的更多信息和使用示例,可以参考腾讯云的相关文档和示例代码:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

大家好,又见面了,我是你们的朋友全栈君。 1.什么是Saga?...为什么要多用纯函数呢?因为它们具有很强的“可预测性”。既然有纯函数,那肯定有不纯的函数喽,或者换个说法,叫做有“副作用”的函数。...上一篇我们介绍过Redux的中间件,说白了就是在action被传递到reducer之前新进行了一次拦截,然后启动异步任务,等异步任务执行完成后再发送一个新的action,调用reducer修改状态数据。...redux-saga的功能也是一样的,参见下图: 左边的蓝圈圈里就是一堆saga,它们需要和外部进行异步I/O交互,等交互完成后再修改Store中的状态数据。...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.7K30
  • redux-saga_pub culture

    大家好,又见面了,我是你们的朋友全栈君。 本文用以记录从调研Redux Saga,到应用到项目中的一些收获。...但是,马上了解到了redux-sage,因为大家都在对比两者。本文并不会做对比,在文章的最后会简单介绍为什么选了Saga而不是thunk的原因,仅供参考。...拿到后端返回状态 (promise so easy…) 隐藏提示信息 (这个有点难度,不过难不倒我,我给组建加一个控制属性) 更新redux store (dispatch咯。。。)...用了redux-saga之后: form组件触发提交action (一行简单的dispatch) reducer这个action不需要我处理 (打酱油了) saga提交表单的副作用走起~ (监听到触发副作用的...,redux来负责数据的状态和绑定数据到react,而Saga处理了大部分复杂的业务逻辑。

    1.4K10

    前端react面试题(必备)2

    所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了;Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...尽管 React 使用高度优化的 Diff 算法,但是这个过程仍然会损耗性能.为什么React并不推荐优先考虑使用Context?...尽管不建议在app中使用context,但是独有组件而言,由于影响范围小于app,如果可以做到高内聚,不破坏组件树之间的依赖关系,可以考虑使用context对于组件之间的数据通信或者状态管理,有效使用props...和解(reconciliation)的最终目标是以最有效的方式,根据这个新的状态来更新UI。...: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable

    2.3K20

    高级前端react面试题总结

    (5)不要滥用useContext可以使用基于 useContext 封装的状态管理工具。React中发起网络请求应该在哪个生命周期中进行?为什么?...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件,用于代替 redux-thunk 的。...所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了;Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable...⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import {createStore

    4.1K40

    百度前端高频react面试题(持续更新中)_2023-02-27

    所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了; Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等 redux-saga...缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的...⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型 redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下: 配置中间件

    2.3K30

    React组件设计实践总结05 - 状态管理

    image.png Redux 的主要结构如上,在此之前你先要搞清楚 Redux 的初衷是什么,才能明白它为什么要这么设计....它的应用工作流如下: image.png 特性: 整合了 Redux 生态比较流行的方案: immer(不可变数据变更),redux-saga(异步数据流处理),reselect(选取和映射 state...使得单独的应用可以被复用 Redux 不是分形和 Redux 本身的定位有关,它是一个纯粹的状态管理器,不涉及组件的视图实现,所以无法像 elm 和 cyclejs 一样形成一个完整的应用闭环。...我为什么从 Redux 迁移到了 Mobx Mobx 与 Redux 的性能对比 总结 本节主要介绍的 Redux 设计的动机,以及围绕着这个动机一系列设计, 再介绍了 Redux 的一些缺点和最佳实践...推荐在 flow 函数中隔离副作用,这个东西和 Redux-saga 差不多,通过 generator 来进行异步操作和副作用隔离 上面就是 Mobx 的核心概念。

    2.2K31

    react项目架构之路初探

    redux 三大原则:单一数据源,只读的state,使用纯函数来修改 redux是一款 状态管理库,并且提供了react-redux来与react紧密结合,核心部分为Store,Action,Reducer...可以参考我的这篇文章 react-redux 提供一个Provider组件 负责吧外层的数据 传递给所有的子组件 connect方法(高阶组件) 负责将props和dispatch的方法 传递给子组件...redux-saga redux-saga 是一个 redux 的中间件,而中间件的作用是为 redux 提供额外的功能。...Sagas 可以被看作是在后台运行的进程,Sagas 监听发起的action,然后决定基于这个 action来做什么 在 redux-saga 的世界里,所有的任务都通用 yield Effects 来完成...(dispatch,getState),在函数体内进行业务逻辑的封装 redux-thunk的缺点: action的形式不统一 ,异步操作太分散,分散在了各个action中 redux-saga本质是一个可以自执行的

    2.5K10

    React saga_react获取子组件ref

    大家好,又见面了,我是你们的朋友全栈君。...redux-saga简介 Redux-saga是Redux的一个中间件,主要集中处理react架构中的异步处理工作,被定义为generator(ES6)的形式,采用监听的形式进行工作。...action不易维护的原因: action的形式不统一 就是异步操作太为分散,分散在了各个action中 2.redux-saga写一个hellosaga 跟redux-thunk,redux-saga...从工作流中,我们发现redux-saga执行完副作用函数后,必须发出action,然后这个action被reducer监听,从而达到更新state的目的。...相应的这里的put对应与redux中的dispatch,工作流程图如下: 从图中可以看出redux-saga执行副作用方法转化action时,put这个Effect方法跟redux原始的dispatch

    4.5K30

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

    一般来说,除了某部分状态数据是只有某个组件关心的,我们会把状态数据放在组件内以外,业务数据、多个组件关心的状态数据都会放在 store 里面。...这个 store 不一定是 redux、mobox 这些第三方库,其实 react 内置的 context 也可以作为 store。...正是因为这个原因,我们几乎见不到用 context 作为 store,基本都是搭配一个 redux。 所以为什么 redux 好呢?第一个原因就是数据流清晰,改变数据有统一的入口。...解决这个问题,需要用 redux-saga 或 redux-observable 中间件。...然后 task 会调用不同的实现函数来执行该 worker saga。 为什么要这样设计呢?直接执行不就行了,为啥要拆成 worker saga 和 task 两部分,这样理解成本不就高了么?

    2.5K10

    Redux原理分析以及使用详解(TS && JS)

    某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中,数据在组件中是单向流动的,这是react...redux-saga将react中的同步操作与异步操作区分开来,以便于后期的管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过对Action进行监听,从而捕获到监听的Action...而react- saga则要求较高,难度较大,我现在也并没有掌握和实践这种异步流的管理方式。...__REDUX_DEVTOOLS_EXTENSION__())) Tip :原来我使用JS+Redux,添加这个插件配置,部署到服务器上用户访问以及别人启动我的项目,都没有报错,但是当我使用TS+hooks...对于这个问题,在我这份代码里面,目前我想到了三个解决方法: 1、定义初始值loading为true,当我们dispatch成功把数据存入的时候,才将loading改为false,写一个加载动画,用这个loading

    4.5K30

    单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

    容器型组件一般通过connet函数生成,它订阅了全局状态的变化,通过mapStateToProps函数,我们可以对全局状态进行过滤,而展示型组件不直接从global state获取数据,其数据来源于父组件...redux-saga redux-saga是一个Redux中间件,用来帮你管理程序的副作用。或者更直接一点,主要是用来处理异步action。...关于saga原理的,推举阅读《前端技术栈(三):redux-saga,化异步为同步》 什么是Saga?...其实我有个点子一直没时间做,那就是把记录下来的 mutations 做成类似 rx-marble 那样的时间线图,对于理解应用的异步状态变化很有帮助。 作者:尤雨溪 ....这样看来我认为VUE是更推荐在使用了VUEX的框架中的每个组件内部都使用store,而React-Redux则提供了自由选择性。

    3.7K40

    前端高频react面试题

    Redux 原理及工作流程(1)原理 Redux源码主要分为以下几个模块文件compose.js 提供从右到左进行函数式编程createStore.js 提供作为生成唯一store的函数combineReducers.js...那为什么会有这样的限制呢?Hooks 的设计初衷是为了改进 React 组件的开发模式。在旧有的开发模式下遇到了三个问题。组件之间难以复用状态逻辑。...: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable...⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import {createStore...一旦有了这个DOM树,为了弄清DOM是如何响应新的状态而改变的, React会将这个新树与上一个虚拟DOM树比较。

    3.4K20

    高频React面试题及详解

    卸载阶段: componentWillUnmount: 当我们的组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作 一个查看react生命周期的网站...redux原理详解 react-redux是如何工作的?...灵活: redux-saga可以将多个Saga可以串行/并行组合起来,形成一个非常实用的异步flow 易测试,提供了各种case的测试方案,包括mock task,分支覆盖等等 redux-saga缺陷...: 额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的...缺陷: 学习成本奇高: 如果你不会rxjs,则需要额外学习两个复杂的库 社区一般: redux-observable的下载量只有redux-saga的1/5,社区也不够活跃,在复杂异步流中间件这个层面redux-saga

    2.4K40

    React全家桶与前端单元测试艺术|洞见

    Redux测试 (Model测试) Redux就是用一堆Reducer函数来reduce所有事件用来做全局Store的状态机(FSM)。...把你自己写的reducer扔进去,然后可以发事件来使其更新,你还可以订阅它来拿状态。...我们用一个叫做Redux-saga的库来展现全家桶的异步测试怎么写,Redux模仿的目标是Elm architecture,但是简化掉了Elm的作用模型,只保留了同步模型,Redux-saga其实就是把...Saga是一种worker模式,很早之前在Java社区就存在了。Redux-saga抽象出来多种通用的作用比如call / takeEvery等等,然后有了这些作用,我们又可以愉快地判等了。...其他部分都可以开心地发同步事件了,此外有了Saga之后Redux终于有了“用事件触发事件”的机制了,只用redux,应用复杂到一定程度你一定会想这个问题的。

    1.1K72

    美团前端react面试题汇总

    redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:额外的学习成本...: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable...⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import {createStore...但是在已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?...redux 是一个应用数据流框架,主要解决了组件之间状态共享问题,原理是集中式管理,主要有三个核心方法:action store reduce工作流程view 调用store的dispatch 接受action

    5.1K30

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

    Redux 原理及工作流程 (1)原理 Redux源码主要分为以下几个模块文件 compose.js 提供从右到左进行函数式编程 createStore.js 提供作为生成唯一store的函数 combineReducers.js...⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等 redux-saga...缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的...⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型 redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下: 配置中间件...但是Redux状态更改可回溯——Time travel,数据多了的时候可以很清晰的知道改动在哪里发生,完整的提供了一套状态管理模式。

    2K00

    2022社招React面试题 附答案

    Redux 原理及工作流程 (1)原理 Redux源码主要分为以下几个模块文件 compose.js 提供从右到左进行函数式编程 createStore.js 提供作为生成唯一store的函数 combineReducers.js...⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等 redux-saga...缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的...⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型 redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下: 配置中间件...但是Redux状态更改可回溯——Time travel,数据多了的时候可以很清晰的知道改动在哪里发生,完整的提供了一套状态管理模式。

    2K50
    领券