首页
学习
活动
专区
工具
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-Redux是Redux的官方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

98910
  • Rematch: Redux 的重新设计

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

    1.6K50

    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 中, 所以说问题就出现在这里,同理在派发任务的时候

    27231

    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

    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, []) // 接收两个参数 一个是回调函数 另外一个是数组类型的参数(表示依赖

    2.1K20

    手写一个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

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

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

    1.1K20

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

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

    90530

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

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

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

    44720

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

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

    73850

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

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

    1.8K10

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

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

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

    1.2K30

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

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

    54240
    领券