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

从mapDispatchToProps中分派操作是个坏主意吗?为什么?

从mapDispatchToProps中分派操作是个坏主意。原因如下:

  1. mapDispatchToProps是React Redux中的一个函数,用于将action creators绑定到dispatch函数上,以便在组件中调用。它的主要目的是将action creators转化为可以在组件中直接调用的props函数。
  2. mapDispatchToProps应该只负责将action creators绑定到dispatch上,而不应该在其中执行分派操作。分派操作应该在组件中进行,或者在thunk或saga等中间件中进行。
  3. 将分派操作放在mapDispatchToProps中会导致以下问题:
    • 违反了单一职责原则:mapDispatchToProps的职责应该是将action creators绑定到dispatch上,而不是执行分派操作。将分派操作放在mapDispatchToProps中会导致该函数既要处理action creators的绑定,又要执行分派操作,违反了函数的单一职责原则。
    • 使代码难以维护和测试:将分派操作放在mapDispatchToProps中会导致组件的代码变得复杂,难以理解和维护。同时,由于分派操作通常涉及到异步操作,如网络请求,将其放在mapDispatchToProps中会使测试变得困难,因为需要模拟异步操作的返回结果。

综上所述,从mapDispatchToProps中分派操作是一个坏主意。正确的做法是将分派操作放在组件中进行,或者使用中间件来处理分派操作。这样可以保持代码的清晰和可维护性,并且方便进行测试。

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

相关·内容

​2021-03-06:go,公共变量协程安全?赋值操作原子的为什么

2021-03-06:go,公共变量协程安全?赋值操作原子的为什么? 福哥答案2021-03-06: 这是面试中被问到的。实力有限,真正的答案还不知道。...我的想法a=1原子操作,a=b不是原子操作。实际开发,不大可能a=1这种情况,可以说是协程不安全。...葡萄❤柠檬 16:06:47 为什么io密集型,线程数2倍呢?...题078_ Tnze 10:27:04 公共变量不是协程安全的,赋值操作不是原子的 Tnze 10:27:45 这是由于线代多核cpu变量可能会储存在不同核心各自的cache上 Tnze 10:29...:05 需要原子操作一定要用sync包 题029_ 【新手】SQL双活负载均衡集群 7:48:53 2倍就是一估计而已,2.5倍,1.8倍,甚至3倍,效果都一样 【资深】葡萄❤柠檬 8:02:30 所以有用啊

1.3K10

react-redux

一、什么react-redux React-ReduxRedux的官方React绑定。 它允许您的React组件Redux存储读取数据,并将操作分派给存储以更新数据。...它由二重要的部分组成,一组件,另一connect()react-redux提供的一柯里化的函数, 用于连接redux 二、学习网址 https://react-redux.js.org...提供的一组件,把这个组件包在最外层,这个组件接收一参数,就是store, store通过redux提供的createStore方法创建的。..., connect有两括号,第一括号传mapStateToProps和mapDispatchToProps,用于把这两方法的返回值注入到当前组件的props, 第二括号为当前组件。...export default connect(mapStateToProps, mapDispatchToProps)(Counter); connect的第一括号也可以直接传(mapStateToProps

96410

Rematch: Redux 的重新设计

在本文中,我们将探讨一些你可能一直在问自己的问题: 你是否需要一用于状态管理的库? Redux 的受欢迎程度是否值得我们去使用? 为什么或者为什么不值得? 我们能否制定更好状态管理解决方案?...状态管理需要一 作为前端开发人员,不仅仅是布局,开发的真正艺术之一知道如何管理存储状态。简而言之:状态管理复杂的,但又并非那么复杂。...也许最流行的状态管理库Redux。在过去的两年里,它变得越来越受欢迎。那么为什么这么喜欢一简单的库呢? Redux 更具性能?答案是否定的。...一简单的 action 到底作为一动态类型的对象、一函数,还是一 Promise?这难道不是一种拙劣的实践? 如上图右边所示,难道我们就不能只使用 async/await ? 4....现在, count.increment ,我们可以以一 reducer 生成 action creator。

1.5K50

React进阶(6)-react-redux的使用

,它是连接容器组件和UI(傻瓜)组件的,它是 react-redux提供的一方法,用于 UI 组件生成容器组件,把两种组件给连接起来 connect方法接收四参数,一 mapStateToProps...,另一 mapDispatchToProps,当然还有两参数: mergeProps, options,它们可选的,它执行的结果依然函数,所以才可以在后面在加上一圆括号的,而圆括号内又接收一参数...,即是UI组件,也是傻瓜组件 有两次 connect的执行,第一次 connect函数的执行react-redux库引入这个方法,第二次把 connect函数返回的函数再次执行,最后产生的就是容器组件...前者负责输入逻辑(mapStateToProps),即将state映射到 UI 组件的参数(props),后者负责输出逻辑(mapDispatchToProps),即将用户对 UI 组件的操作映射成 Action...换句话说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一函数,也可以是一对象。

2.2K00

『Dva』管理数据

再比如说,别人派发一 sub,这个时候就会去 reducers 中找到 key sub 的这个哥们来去执行,发现没有,那么就不会执行任何操作,如果说有,它就会执行对应的操作,所以说 reducers...然后你就可以 state 里面获取 count,在这里有一注意点,在前面我说过将来我们有可能定义多个 model,多个 model ,是不是都有可能保存数据,例如,我在项目中在加一 aboutModel...经过了这一步我们的数据就已经有了,接下来就是完善一下派发的方法了,更改 mapDispatchToProps,在当中定义一 increment 方法,mapDispatchToProps 默认会传递一...666,原因很简单就是我 homeModel 的 count 我修改为了 666,为什么会显示 666 呢,就是因为我在 mapStateToProps 明确的指定了我要拿到的 homeModel...原因很简单,获取数据的时候, 我们需要指定哪一命名空间的 Model 获取, 但是在派发任务的时候, 我们没有指定派发到哪一命名空间的 Model , 所以说问题就出现在这里,同理在派发任务的时候

15131

React进阶(6)-react-redux的使用

,它是连接容器组件和UI(傻瓜)组件的,它是 react-redux提供的一方法,用于 UI 组件生成容器组件,把两种组件给连接起来 connect方法接收四参数,一 mapStateToProps...,另一 mapDispatchToProps,当然还有两参数: mergeProps, options,它们可选的,它执行的结果依然函数,所以才可以在后面在加上一圆括号的,而圆括号内又接收一参数...,即是UI组件,也是傻瓜组件 有两次 connect的执行,第一次 connect函数的执行react-redux库引入这个方法,第二次把 connect函数返回的函数再次执行,最后产生的就是容器组件...前者负责输入逻辑(mapStateToProps),即将state映射到 UI 组件的参数(props),后者负责输出逻辑(mapDispatchToProps),即将用户对 UI 组件的操作映射成 Action...换句话说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一函数,也可以是一对象。

2K10

Redux with Hooks

)(React.memo(Form)); 上面代码描述了一简单的表单组件,通过mapDispatchToProps生成的queryFormData prop请求表单数据,并在useEffect诚实地记录了依赖...由于mapDispatchToProps被调用时会返回一全新的对象(上面的queryFormData、submitFormData也将会是全新的函数),所以这会导致上面传入到的queryFormData...所以代码质量的角度考虑,尽量不要偷懒采用这种写法。 2....同样改动较少的做法,但缺点把相关联的逻辑强行分割到了两地方(mapDispatchToProps和组件里)。...是的,memo能为我们守住来自props的更新,然而state在组件内部通过useContext这个hook注入的,这么一来就会绕过最外层的memo。 那么有办法可以避免这种强制更新

3.3K60

(JVM)Java虚拟机:手把手带你深入解析 - 静态分派 & 动态分派原理

前言 了解 行为方法分派 有利于在行为分派时时进行一些功能操作 本文全面讲解行为分派的类型:静态 & 动态行为分派,希望你们会喜欢。 目录 1....知识储备 1.1 分派 定义:确定执行哪个方法 的过程 a. 疑问 有些读者会问,方法的执行不是取决于代码设置的执行对象为什么还要选择呢? b....回答 若 一对象对应于多个方法 时,就需要进行选择了 读者应该都想到了 Java的特性:多态,即重写 & 重载。下面我会详细讲解。 分类:静态分派 & 动态分派。下面我将详细讲解。...main(String[] args) { sayHello('a'); } } // 运行结果 hello char 因为‘a’...其中...为变长参数,将其视为一数组元素。变长参数的重载优先级最低。

1K20

React系列-自定义Hooks很简单

总结来说: 如果你的state数组或者对象等复杂数据结构 如果你的state变化很复杂,经常一操作需要修改很多state 如果你希望构建自动化测试用例来保证程序的稳定性 如果你需要在深层子组件里面去修改一些状态...); } return ( // 返回页面JSX Element ) } ❗️我们的state变化很复杂,经常一操作需要修改很多...state,另一好处所有的state处理都集中到了一起,使得我们对state的变化更有掌控力,同时也更容易复用state逻辑变化代码,比如在其他函数也需要触发登录success状态,只需要dispatch...为什么使用 如果你在接触 Hook 前已经对 context API 比较熟悉,那应该可以理解,useContext(MyContext) 相当于 class 组件的 static contextType...,useLayoutEffect同步的 为什么使用 解决一些闪烁场景 如何使用 useLayoutEffect(fn, []) // 接收两参数 一回调函数 另外一数组类型的参数(表示依赖

2K20

Carson带你学JVM:方法分派模型-静态分派、动态分派

前言 了解 行为方法分派 有利于在行为分派时时进行一些功能操作 本文全面讲解行为分派的类型:静态 & 动态行为分派,希望你们会喜欢。 目录 1....知识储备 1.1 分派 定义:确定执行哪个方法 的过程 a. 疑问 有些读者会问,方法的执行不是取决于代码设置的执行对象为什么还要选择呢? b....回答 若 一对象对应于多个方法 时,就需要进行选择了 读者应该都想到了 Java的特性:多态,即重写 & 重载。下面我会详细讲解。 分类:静态分派 & 动态分派。下面我将详细讲解。...main(String[] args) { sayHello('a'); } } // 运行结果 hello char 因为‘a’...其中...为变长参数,将其视为一数组元素。变长参数的重载优先级最低。

40720

react-redux 开发实践与学习分享

关联rudex和页面组件-connect 之前主页面的代码可以看到,错误信息的显示由组件的props传进来的,而主页面如何获取相关的props的呢,答案通过一connect的函数。...为了方便快速理解,我们可以简单粗暴的认为他jsgetter,setter的getter,这是一用来redux获取值的函数,这个函数返回的值,可以在当前组件的props拿到。...mapDispatchToProps(dispatch, ownProps) 如果说mapStateToPropsgetter的话,那么mapDispatchToProps就是一setter,他触发了...具体到本例,触发redux行为的操作在注册页面,因此注册页面添加如下代码: const mapDispatchToProps = (dispatch) => { return bindActionCreators...=> state, mapDispatchToProps)(Main); 可以看到当注册页面执行showTip的函数时,就会触发redux的showTip的操作,这个操作提前定义好的。

88130

手写一React-Redux,玩转React的Context API

/reducer'; let store = createStore(reducer); export default store; 上面代码createStore的参数reducer,所以我们还要写个...)(Counter) 复制代码 上面代码可以看到connect高阶函数,他的第一阶会接收mapStateToProps和mapDispatchToProps参数,这两参数都是函数。...在手写之前我们先来思考下,为什么React-Redux要设计这两API,假如没有这两API,只用Redux可以?当然可以的!...我们知道React单向数据流的,参数都是由父组件传给子组件的,现在引入了Redux,即使父组件和子组件都引用了同一变量count,但是子组件完全可以不从父组件拿这个参数,而是直接Redux拿,这样就打破了...connect在判断是否变化的时候使用的浅比较,也就是只比较一层,所以在mapStateToProps和mapDispatchToProps不要反回多层嵌套的对象。

3.7K21

Flux --> Redux --> Redux React 基础实例教程

在React的使用(异步,使用中间件) 一、Flux Flux一种概念思想,或者说是一种应用架构 根据它的概念,一应用的数据流动应是单向的,且应用的所有数据保存在一位置,数据变化时保证视图也同步变化...,在redux它被称作reducer 为什么把这种操作称作reducer呢 redux引入了JS数组reduce方法的思想,JS的reduce长这样 var arr = [1, 2, 3, 4];...,接收两参数,第一参数为数据(即某个状态state),第二参数为action操作对象 为了切合store数据与view中视图一一对应的,reducer规定需始终返回新的state数据,不能直接在原有... 这里就不传入了,即 let APP = connect( mapStateToProps )(Increase); 用回常见的方式,在React组件改一改,直接props获取某个dispatch...4.7.8 在React-Redux中使用异步 因Redux操作的执行同步的,如果要实现异步,比如某个操作用来发个异步请求获取数据,就得引入中间件来处理这种特殊的操作 即这个操作不再普通的值,而是一函数

3.6K20

Redis 到底单线程还是多线程?我要吊打面试官!

最近发布的文章,其中有一道题: Redis多线程还是单线程?(回答单线程的请回吧,为什么请回,请往下看) 好些粉丝在后台问我:为什么请回,Redis不是单线程?...它的组成结构为4部分:多个套接字、IO多路复用程序、文件事件分派器、事件处理器。 因为文件事件分派器队列的消费单线程的,所以Redis才叫单线程模型。...另外,前些天 Redis 6 正式发布了,其中有一被说了很久的多线程IO: ?...参考:blog.csdn.net/weixin_45583158/article/details/100143587 从上面的性能测试图来看,多线程的性能几乎单线程的两倍了,该文章来看,这个只是简单的针对多线程性能的验证...最后,目前最新的 6.0 版本,IO 多线程处理模式默认不开启的,需要去配置文件开启并配置线程数,有兴趣的研究下吧。

1.1K30

深入理解Redux数据更新机制:数据流管理的核心原理

前言 在现代的前端开发,数据管理至关重要的问题。随着应用程序的复杂性不断增加,我们需要一种有效的方式来管理数据的流动和更新。...Action:定义应用程序中发生的操作的对象,它是一简单的JavaScript对象,包含一type属性和一些其他数据。...Redux的数据流单向的,store开始,通过dispatch一action来触发数据的更新,然后通过reducer来更新store的数据。...此外,Redux还提供了中间件机制,可以在数据更新的过程添加额外的逻辑。中间件可以用来处理异步操作、日志记录、错误处理等。...dispatch Redux Store 的一方法,用于分发动作。在 mapDispatchToProps ,我们可以将动作包装成回调函数或者直接将它们分发到 Redux。

29840

Reduxreact-reduxredux中间件设计实现剖析

可读性很差」 JS一门极其依赖语义化的语言,试想如果在代码不经注释直接修改了公用的state,以后其他人维护代码得多懵逼,为了搞清楚修改state的含义还得根据上下文推断,所以我们最好给每个操作「...Provider实现 我们先从比较简单的Provider开始实现,Provider组件,接收store并放进全局的context对象,至于为什么要放进context,后面我们实现connect的时候就会明白...mapStateToProps一起传进去,看似没必要return一函数再传入App,为什么react-redux要这样设计,react-redux作为一被广泛使用的模块,其设计肯定有它的深意。...其实connect这种设计,「装饰器模式」的实现,所谓装饰器模式,简单地说就是对类的一包装,动态地拓展类的功能。connect以及React的高阶组件(HoC)都是这一模式的实现。...,删掉无用的文件,并创建store.js、reducer.js、react-redux.js来分别写我们redux和react-redux的代码,index.js项目的入口文件,在App.js我们简单的写一计数器

2.2K20

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

react代理原生事件为什么?...组件比对:如果组件同一类型,则进行树比对,如果不是,则直接放入到补丁。元素比对:主要发生在同层级,通过标记节点操作生成补丁,节点操作对应真实的 DOM 剪裁操作。...mapStateToProps(state,ownProps)带有两参数,含义∶state-store管理的全局状态对象,所有都组件状态数据都存储在该对象。...本质上来说,Virtual DomJavaScript对象,通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。...另外现代前端框架的一基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发者写出性能较低的代码,另一方面更重要的省略手动DOM

68650

20道高频React面试题(附答案)

为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 的设计基于数组实现。在调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。...本质上来说,Virtual DomJavaScript对象,通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。...另外现代前端框架的一基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发者写出性能较低的代码,另一方面更重要的省略手动DOM...为什么要用 Virtual DOM:(1)保证性能下限,在不进行手动优化的情况下,提供过得去的性能下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程,来看一下它们重排重绘的性能消耗∶真实...(2)非受控组件 如果一表单组件没有value props(单选和复选按钮对应的checked props)时,就可以称为非受控组件。在非受控组件,可以使用一ref来DOM获得表单值。

1.7K10
领券