首页
学习
活动
专区
工具
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.2K30

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

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

16910

从应用到源码-深入浅出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 来在数组前面塞一个值,不也可以吗?

31720

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

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

8.4K20

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

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

29330

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

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

39710

翻译 | 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传递给组件,会发生什么?

70820

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参数

55410

Redux设计模式

Reducer是帮助Store处理数据方法,他是一个方法是一个过程是一个函数不是一个具体存在对象,Reducer可以帮助Store初始化数据,修改数据,删除数据,你可能会好奇我们为什么要使用Reducer...首先创建数据仓库StoreReducer会同时初始化数据state。React Component会订阅StoreStore数据就会被推送过来,然后渲染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

3.8K30

高频React面试题及详解

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

2.4K40

React技术栈项目结构探究

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

86530

前端经典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.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过程,来看一下它们重排重绘性能消耗∶真实...尤雨溪社区论坛中说道∶ 框架给你保证是,你不需要手动优化情况下,依然可以给你提供过得去性能。

70450

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.1K20

前端经典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-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,如果我们只需要拦截一个类型...,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎评论区留言,一般看到都会回复

17730

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隔离,同时也统一了状态管理

1.9K20
领券