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

为什么在导入store for feature之后,当我调度一个操作时,我的reducer会被多次调用?

在导入store for feature之后,当调度一个操作时,reducer会被多次调用的原因是因为store for feature的设计思想是将应用的状态和逻辑分割成多个feature,每个feature都有自己的reducer。当调度一个操作时,store会遍历所有的reducer,并将操作传递给每个reducer进行处理。

在这个过程中,如果某个reducer的状态发生了变化,那么这个reducer会返回一个新的状态对象,而不是修改原来的状态对象。这样做的好处是可以保持状态的不可变性,方便进行状态的追踪和调试。

然而,由于每个reducer都会被调用,所以如果多个reducer都对同一个操作进行了处理,那么每个reducer都会返回一个新的状态对象,最终导致reducer被多次调用。

为了解决这个问题,可以在每个reducer中添加判断逻辑,只有当操作与当前reducer对应的feature相关时,才进行状态的更新。这样可以避免不必要的状态更新和reducer的多次调用。

总结起来,导入store for feature后,当调度一个操作时,reducer会被多次调用是因为每个feature都有自己的reducer,而且每个reducer都会被调用。为了避免这个问题,可以在reducer中添加判断逻辑,只有当操作与当前reducer对应的feature相关时,才进行状态的更新。

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

相关·内容

TCA - SwiftUI 的救星?(一)

另外,当我们有更多更复杂的 Reducer 时,我们也可以选择只在某个或某几个 Reducer 上调用 .debug() 来帮助调试。...在 TCA 中,一组关联的 State/Reducer/Action (以及 Environment) 统合起来称为一个 Feature。...不出意外,当 WithViewStore 接受的闭包满足 View 协议时,它本身也将满足 View,这也是为什么我们能在 CounterView 的 body 直接用它来构建一个 View 的原因。...当我们在 View 之间自上向下传递数据时,尽量保证把 Store 进行细分,就能保证模块之间互不干扰。...但是,实际上在使用 TCA 做项目时,更多的情景时我们从更小的模块进行构建 (它会包含自己的一套 Feature),然后再把这些本地内容”添加“到它的上级。所以 Store 的切分将会变得自然而然。

3.3K30

第十九篇: 揭秘 Redux 设计思想与工作原理(下)

这段代码中调用 reducer,传入 currentState 和 action,对应的正是第 05 讲中“编码角度看 Redux 工作流”图示中的 action => reducer =>store...在实际的开发中,subscribe 并不是一个严格必要的方法,只有在需要监听状态的变化时,我们才会调用 subscribe。...首先,我们可以在 store 对象创建成功后,通过调用 store.subscribe 来注册监听函数,也可以通过调用 subscribe 的返回函数来解绑监听函数,监听函数是用 listeners 数组来维护的...(见下面代码),这之后两者确实指向同一个引用。...2.3. currentListeners 数组用于确保监听函数执行过程的稳定性 正因为任何变更都是在 nextListeners 上发生的,我们才需要一个不会被变更的、内容稳定的 currentListeners

26610
  • 从应用到源码-深入浅出Redux

    思路 整体思路我画了一张草图来给大家提供一些思路,核心其实就是在 createStore 中通过闭包的形式访问内部的 state 从而进行一系列操作。 当然,也许现在对于这张图你会感到疑惑。...之后在 dispatch 过程中依次去寻找所有的 reducer 进行逻辑调用,最终 getState 返回一个名为 rootState 的顶级对象。...需要留意的一点是在通过 dispatch 触发 action 时多个 reducer 之间我刻意使用了流通这个关键字是有原因的,我们会在稍微详细解释到。...当我们派发任意一个 action 时,即使当前派发的 action 已经匹配到了对应的 reducer 并且执行完毕后。...当我们调用 store.dispatch 函数时,又会经历以下步骤: 当我们调用 store.dispatch(action) 时,首先拿到返回的 args 函数,相当于调用 args(action)

    1.3K10

    React 入门学习(十六)-- 数据共享

    我们来看看 在我们调用 connect 函数时,我们第一次调用时传入的第二个参数,就是用于传递方法的,我们传递了一个 add 方法 export default connect( state =...:mapDispatchToProps 我的理解是,传入的东西会被映射映射成 props 对象下的方法,这也是我们能够在 props 下访问到 add 方法的原因 对于这一块 connect ,我们必须要能够形成自己的理解...想象一个 store 仓库,在我们这个案例当中,Count 组件需要存放 count 值在 store 中,Person 组件需要存放新增用户对象在 store 中,我们要把这两个数据存放在一个对象当中...根据操作类型来指定状态的更新 也就是说当我们点击了添加按钮后,会将输入框中的数据整合成一个对象,作为当前 action 对象的 data 传递给 reducer 我们可以看看我们编写的 action 文件...在我们 return 时,有时候会想通过数组的 API 来在数组前面塞一个值,不也可以吗?

    33620

    第二十篇:从 Redux 中间件实现原理切入,理解“面向切面编程”

    经典的异步 Action 解决方案redux-thunk 在针对 Redux 源码主流程的分析中,我们不难看出这样一个规律:Redux 源码中只有同步操作,也就是说当我们 dispatch action...时,state 会被立即更新。...redux-thunk 的源码其实非常简洁,我第一次接触时还是在 2016 年,这么多年过去了,很多事情都变了,唯一不变的是 redux-thunk,它仍然那么好懂。...为什么我们的应用需要中间件呢?这里,我就以 Redux 中间件机制为例,简单和你聊聊中间件背后的“面向切面”编程思想。...在 OOP 模式下,当我们想要拓展一个类的逻辑时,最常见的思路就是继承:class A 继承 class B,class B 继承 class C......这样一层一层将逻辑向下传递。

    45530

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    但是有了状态之后,React 函数组件即使在执行后也可以存储信息。当我们需要一个组件来存储或“记住”某些东西,或者根据环境以不同的方式执行时,状态就是我们所需要的可以让这些生效的东西。...举个例子,用户连续多次按下 ADD 按钮,或者一个循环中发出一定次数的点击事件。 通过setCount(count+1)更新状态,在下一个事件被触发时 count 会有不被更新的风险。...为了创建一个 store,我们导入 createStore 函数,并将一个 reducer 函数作为输入传递给它。...在示例中,你可以看到我们在调用 ADDSOME/SUBSOME 时可以直接从组件中传递我们想要加/减的数字。...函数,通过调用此函数来创建 store,并将一个带有 reducer 的对象传递给它,该对象本身就是一个包含 slice 的对象。

    8.5K20

    React 入门学习(十六)-- 数据共享

    我们来看看 在我们调用 connect 函数时,我们第一次调用时传入的第二个参数,就是用于传递方法的,我们传递了一个 add 方法 export default connect( state =...:mapDispatchToProps 我的理解是,传入的东西会被映射映射成 props 对象下的方法,这也是我们能够在 props 下访问到 add 方法的原因 对于这一块 connect ,我们必须要能够形成自己的理解...想象一个 store 仓库,在我们这个案例当中,Count 组件需要存放 count 值在 store 中,Person 组件需要存放新增用户对象在 store 中,我们要把这两个数据存放在一个对象当中...根据操作类型来指定状态的更新 也就是说当我们点击了添加按钮后,会将输入框中的数据整合成一个对象,作为当前 action 对象的 data 传递给 reducer 我们可以看看我们编写的 action 文件...在我们 return 时,有时候会想通过数组的 API 来在数组前面塞一个值,不也可以吗?

    43910

    翻译 | 我在 React-Native app开发中曾经犯过的11个错误

    错误的Redux store规划 可能会犯大错误的地方. 当你在设计应用的时候,你可能更多的考虑表现层.很少考虑到数据操作....当我刚开始构建RN app的时候,我只把reducers作为每一个container的数据容器.所以如果你有登录,密码找回,ToDO list页面-reducer应该是比较简单-:SigIn,Forgot...在经过一段时间的store规划以后,我发现在我的程序中不太好管理数据了.我已经有了一个ToDo 详情页面.使用上面的想法,store需要一个ToDoDetails reducer是吗?...这是一个巨大的错误!为什么? 当我从ToDo List中选择出需要传递到ToDoDetail reducer的一项.这意味着使用了额外的actions 发送数据到reducer.非常的不合适....Dumb组件不应该知道周围的任何环境因素.仅仅只要执行和展示他们被告知的数据.经过这次”升级”之后.但是这个做法并不好,为什么? 如果我们把5作为id传递给组件,会发生什么?

    74520

    Redux 源码解析系列(一) -- Redux的实现思想

    2、为什么要有createStore 现在我们有了状态,又有了dispatch,这时候我们需要一个高层管理者store,帮我们管理好他们, 所以我们就有了createStore这个函数帮我们生成store...到了这一步,每当我想状态发生改变的时候,我就dispatch一个action来改变组件当前的状态。 但是这里还有一个问题,就是store里的数据发生改变之后,react是感知不到的。 如图: ?...所以我们需要手动在重新render一次APP,这时候就需要观察者模式,订阅数据的改变,然后自动调用renderApp,所以我们的createStore功能又强大啦~ function createStore...到这一步,一个APP就已经可以无压力的跑起来啦,最后一步,当然是关注性能,我们这个app 还是有严重性能问题的,因为每一次的dispatch 一次action,不管数据有没有变化,组件都会被重新渲染,这当然是不必要的...3、为什么reducer是纯函数 所以就需要对reducer产生的前后appState进行一个对比,这就要求reducer必须是一个纯函数,返回的是一个新的object,不能直接更改reducer的参数

    58910

    Redux的设计模式

    Reducer是帮助Store处理数据的方法,他是一个方法是一个过程是一个函数不是一个具体存在的对象,Reducer可以帮助Store初始化数据,修改数据,删除数据,你可能会好奇我们为什么要使用Reducer...首先创建数据仓库Store,Reducer会同时初始化数据state。React Component会订阅Store,Store中的数据就会被推送过来,然后渲染UI....Reducer更新完成以后就会向Store输出一个新的state,Store取到新的state之后就会向订阅了自己的React组件推送这个新的数据。然后重新再次渲染UI。...操作的也就是我们之前说的Reducer,所以他需要接收action参数,因为他是帮助Store处理数据的,所以也需要接收源数据,返回值是更新后的数据。...满足上面一种或几种情况建议使用redux,如果你还在考虑项目要不要使用redux我给的建议就是不要。技术是为了服务业务。为了避免设计的头重脚轻,建议只有在需要的时候才引入新概念,切忌为了使用而使用。

    1.5K20

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

    某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中,数据在组件中是单向流动的,这是react...,派发给 redux Store 的 action 对象,会被 Store 上的多个中间件依次处理,值得注意的是这些中间件会按照指定的顺序一次处理传入的 action,只有排在前面的中间件完成任务之后,...,将dispatch作为函数的第一个参数传递进去,在函数内进行异步操作。...(userNameRedux) },[]) ) } BUG分享 需求:一个接口,需要在多个页面调用,而且多个页面互相没有关联,我在每个页面都去调用这个接口,显然这是浪费性能的,我就想在...对于这个问题,在我这份代码里面,目前我想到了三个解决方法: 1、定义初始值loading为true,当我们dispatch成功把数据存入的时候,才将loading改为false,写一个加载动画,用这个loading

    4.5K30

    高频React面试题及详解

    、Portals、字符串和数字、Boolean和null等内容 componentDidMount: 组件装载之后调用,此时我们可以获取到DOM节点并操作,比如对canvas,svg的操作,服务器请求,...卸载阶段: componentWillUnmount: 当我们的组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作 一个查看react生命周期的网站...,这造成了多余的请求,其次,在React 16进行React Fiber重写后,componentWillMount可能在一次渲染中多次调用....Reducer:Store收到Action以后,必须给出一个新的State,这样View才会发生变化。这种State的计算过程就叫做Reducer。...然后,Store自动调用Reducer,并且传入两个参数:当前State和收到的Action,Reducer会返回新的State State一旦有变化,Store就会调用监听函数,来更新View。

    2.4K40

    前端面试指南之React篇(一)

    页面没使用服务渲染,当请求页面时,返回的body里为空,之后执行js将html结构注入到body里,结合css显示出来;SSR的优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少...该函数会被传入 next 的下一个 middleware 的 dispatch 方法,并返回一个接收 action 的新函数,这个函数可以直接调用 next(action),或者在其他需要的时刻调用,甚至根本不去调用它...调用链中最后一个 middleware 会接受真实的 store的 dispatch 方法作为 next 参数,并借此结束调用链。...为什么要用 Virtual DOM:(1)保证性能下限,在不进行手动优化的情况下,提供过得去的性能下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程,来看一下它们重排重绘的性能消耗∶真实...尤雨溪在社区论坛中说道∶ 框架给你的保证是,你不需要手动优化的情况下,我依然可以给你提供过得去的性能。

    73850

    前端经典react面试题及答案_2023-02-28

    异步"的; 原因: 因为在setState的实现中,有一个判断: 当更新策略正在事务流的执行中时,该组件更新会被推入dirtyComponents队列中等待执行;否则,开始执行batchedUpdates...,传入的函数将会被 顺序调用; 注意事项: setState 合并,在 合成事件 和 生命周期钩子 中多次连续调用会被优化为一次; 当组件已被销毁,如果再次调用setState,React 会报错警告,...action到达store之前会走中间件,这个中间件会把函数式的action转化为一个对象,在传递给store 调用 setState 之后发生了什么 在代码中调用 setState 函数之后,React...雪球效应,虽然我一个组件还是使用着同一个 mixin,但是一个 mixin 会被多个组件使用,可能会存在需求使得 mixin 修改原本的函数或者新增更多的函数,这样可能就会产生一个维护成本 HOC 解决了这些问题...react 的虚拟dom是怎么实现的 图片 首先说说为什么要使用Virturl DOM,因为操作真实DOM的耗费的性能代价太高,所以react内部使用js实现了一套dom结构,在每次操作在和真实dom之前

    1.5K40

    前端经典react面试题(持续更新中)_2023-03-15

    ,如果key不一样,则react先销毁该组件,然后重新创建该组件调用 setState 之后发生了什么在代码中调用 setState 函数之后,React 会将传入的参数与之前的状态进行合并,然后触发所谓的调和过程...遍历子节点的时候,不要用 index 作为组件的 key 进行传入参考 前端进阶面试题详细解答refs的作用是什么,你在什么样的业务场景下使用refs操作DOM,为什么操作DOM?...比如做个放大镜功能为什么虚拟 dom 会提高性能虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要 的 dom 操作,从而提高性能具体实现步骤如下...每当父组件引发当前组件的渲染过程时,getDerivedStateFromProps 都会被调用,这样我们有机会根据新的 props 和当前的 state 来调整一个新的 state。...,会导致插入位置之后的列表全部重新渲染这也是为什么渲染列表时为什么要使用唯一的 key。

    1.3K20

    React总结概括

    当我们使用组件时,其实是对Main类的实例化——new Main,只不过react对这个过程进行了封装,让它看起来更像是一个标签。...5、componentDidMount() 组件渲染之后调用,可以通过this.getDOMNode()获取和操作dom节点,只调用一次。...dispatch会立即触发reducer,有些时候我们不希望它立即触发,而是等待异步操作完成之后再触发,这时候用redux-thunk对dispatch进行改造,以前只能传入一个对象,改造完成后可以传入一个函数...2、subscribe: 监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化,当我们需要知道state是否变化时可以调用,它返回一个函数,调用这个返回的函数可以注销监听...三、此时ui组件就可以在props中找到actionCreator,当我们调用actionCreator时会自动调用dispatch,在dispatch中会调用getState获取整个state,同时注册一个

    1.2K20

    React技术栈项目结构探究

    ,在刚开始学习的时候,我的很多学习demo也是按照这种方式去组织的代码结构 这种结构最直观的就是,看起来非常的简单明了。...当然,这也可能就是官网为了给我最直接的引导所采用的项目结构。但是在慢慢后面的使用中你会发现很多的弊端。 其中最主要的就是在每次增加一个新的功能的开发一个功能模块的时候,你要各种目录下操作。...因为redux会将整个应用状态作为一个store来管理,不同的模块之间可以共享state中的任何一个部分,这种情况下,可能feature1中的dispatch会影响到feature2中的reducer,...对我来说,把这些相关的代码放在一个独立的文件中更方便,这样做还可以很容易的打包到软件库/包中。...但在使用Ducks结构时,action creators和reducer定义在同一个文件中,import *的导入方式会把reducer也导入进来(如果action types也被export,那么还会导入

    90730

    React-Redux-Saga

    , 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga在创建 store 时应用 redux-saga...中间件,更改 store.jsimport {createStore, applyMiddleware} from 'redux'/*注意点: 如果导入的是redux-thunk, 那么返回给我们的是一个中间件对象...来保存状态(state)const store = createStore(reducer, storeEnhancer);/*注意点: 如果是redux-thunk, 那么在创建store的时候指定完中间件即可...那么问题来了,如果想要验证如上博主所说的这点,就必须要派发多次 action 那么该如何进行派发呢,正好可以借助该问题就可以引出一个全新的知识点了那么就是连续派发多个 action,如果我们只需要拦截一个类型的...,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。

    21430

    Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

    当 Model 设置给 AnimatedBuildler 时, Listenable 的 addListener 会被调用,然后添加一个 _handleChange 监听到 _listeners 这个...所以当我们通过 context 调用 inheritFromWidgetOfExactType 时,就可以往上查找到父控件的 Widget,从在 scoped_model 获取到 _InheritedModel...之后我们可以 dispatch 一个 Action ,在经过 middleware 之后,触发对应的 Reducer 返回数据,而事实上这里核心的内容实现,还是 Stream 和 StreamBuilder...4、当我们调用 Stroe 的 dispatch 方法时,我们会先进过 NextDispatcher 数组中的一系列 middleware 拦截器,最终调用到队末的 _changeController...在 flutter_redux 中,开发者的每个操作都只是一个 Action ,而这个行为所触发的逻辑完全由 middleware 和 reducer 决定,这样的设计在一定程度上将业务与UI隔离,同时也统一了状态的管理

    2.1K20
    领券