V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yazoox
V2EX  ›  React

react-redux 是推荐用传统的爷父子传参方式,还是 hooks 的方式发送 acton?

  •  
  •   yazoox · 2020-11-19 13:53:29 +08:00 · 2896 次点击
    这是一个创建于 1226 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司的项目,react, redux, + saga 的,三四年了。今年,开始,升级了 react 的版本,有人开始用 hooks 了。

    于是我也跟风用 hooks,尤其是 useDispatch 。 这样,对于一些比较简单的组件,只发送一些比较简单的 action,我不用在 props 里面定义一堆 functions,然后通过 祖宗,太爷爷,爷爷,父亲把 具体的用户函数传递进来。可以直接在当前组件里面,就直接发送 actions 了。

    结果,在代码审查时,有个人加注释说,让我不要用 useDispatch,改回传统的 react-redux 方式。

    我特意去 google 搜索了一下,没有找到相关的讨论。在组件内,直接使用 useDispatch,然后发送 actions 的方法,不推荐么?

    我的理解是,hooks 这一套,就是为了简化 /优化一些复杂冗余的调用。为啥这个不推荐用?是有什么说法么?

    想来听听大家的意见

    22 条回复    2020-11-27 12:05:33 +08:00
    liubiantao
        1
    liubiantao  
       2020-11-19 14:03:44 +08:00
    gouflv
        2
    gouflv  
       2020-11-19 14:35:04 +08:00 via iPhone
    跟 redux 说再见吧
    tonyYo
        3
    tonyYo  
       2020-11-19 15:04:54 +08:00
    花了大力气弃用了 redux
    yazoox
        4
    yazoox  
    OP
       2020-11-19 15:15:02 +08:00
    @gouflv 这个,真的放弃不了啊。以前的那套框架,写了好多代码。顶多只能新代码改进一下。
    joesonw
        5
    joesonw  
       2020-11-19 15:42:49 +08:00
    爷父子传递的话还用什么 redux 啊.
    zqx
        6
    zqx  
       2020-11-19 16:09:40 +08:00 via Android
    用 React 的 Context API 简单一些吧?
    baxtergu
        7
    baxtergu  
       2020-11-19 16:20:05 +08:00
    你都用 saga 了就还是按照 saga 那套中心化 store 的模式来吧。如果想在组件内使用 hooks,那就在你的页面最外层包一层 conncect 把 dispatch 和 store 传进去(可以爷父子一层一层,也可以创建一个 context 直接隔着传下去),里面的消费组件只要写好 effect 处理好引用变更就好了。
    KuroNekoFan
        8
    KuroNekoFan  
       2020-11-19 16:41:43 +08:00
    我反正挺讨厌那种一板一眼的写法的,有的人喜欢
    只能打一架了
    KuroNekoFan
        9
    KuroNekoFan  
       2020-11-19 16:43:43 +08:00
    但是让不要用 useDispatch 明显就有问题了,hooks 出现的其中一个原因就是为了让人规避 connect 这种 hoc
    dartabe
        10
    dartabe  
       2020-11-19 17:06:25 +08:00
    别用 HOC 你每个模块还要写个连接完全是浪费时间

    当然只是我的个人看法 希望有大佬来说说
    duan602728596
        11
    duan602728596  
       2020-11-19 17:56:53 +08:00
    没啥说法,推荐使用 useDispatch
    matatabi
        12
    matatabi  
       2020-11-19 18:29:00 +08:00
    一直在用 dva,hooks 还没有用上
    nav4e
        13
    nav4e  
       2020-11-19 18:35:17 +08:00
    看起来主要还是为了区分 Container 和 Presentational 组件

    展示组件不直接使用到 dispatch, 只响应 props 行为, 在代码大改动的时候, 只需要动到 Container
    https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

    如果是出现传递层级太深, 建议定好 context 的 api, 走 context
    VDimos
        14
    VDimos  
       2020-11-19 19:15:05 +08:00 via Android
    都用过,还是回到 context 了,context 永远的神
    connection
        15
    connection  
       2020-11-19 19:28:10 +08:00
    用 redux 的一个好处就是规避多层级传递无用 props 吧
    weixiangzhe
        16
    weixiangzhe  
       2020-11-20 09:16:31 +08:00
    redux 主要还是全局状态,我看很多人的时候,特别是配合 dva 用的时候,redux 只做数据载入用。我这个有个老项目用户数据通过 localStorage 存,所有接口都是 redux 走,头大的很。实际上大部分时候确实不需要 redux, 当前我们这边用 redux 或者全局状态的情景:

    系统级需要用的数据,用户的基本信息,系统配置,ws 传过来的数据;
    Qinmei
        17
    Qinmei  
       2020-11-20 10:30:04 +08:00
    redux 的 useSelector 以及 useDispatch 就是给 hook 用的,如果你用 hooks 还要先 connect,那相当于不用啊

    如果说直接用跟业务不太匹配,那也可以自行封装一套,redux 只是一种思想范式,如果连代码都要样板化,那才是真的限制死了
    xi_lin
        18
    xi_lin  
       2020-11-23 21:27:52 +08:00
    CR 的时候那个人的理由是啥?
    yazoox
        19
    yazoox  
    OP
       2020-11-25 09:49:16 +08:00
    @nav4e "如果是出现传递层级太深, 建议定好 context 的 api, 走 context"
    这个能具体多说两句么?前半句明白,我们现在已经有点这个苗头了。后半两句,不知道怎么弄?
    谢谢。
    nav4e
        20
    nav4e  
       2020-11-25 11:19:54 +08:00
    @yazoox 和 ls 说的 context api 一样

    |--business_context.ts
    |--business page
    |- page-inside
    |- component-inside-inside

    如在具体页面里头定好这个页面使用到的 context, 如
    {
    create: () => dispatch('xx'),
    update: () => dispatch('xxx'),
    }

    之后页面内的任意级组件使用 const { create } = useContext(business_context) 去调用。

    具体权衡可以看 https://zh-hans.reactjs.org/docs/context.html

    context 这东西配合 ts 用起来会比较舒服
    yazoox
        21
    yazoox  
    OP
       2020-11-26 10:52:39 +08:00
    @nav4e thx.
    其实,redux 操作对象也是 context,只是用它那套包装了一下。
    不过,直接使用 context,能够减少 redux 的依赖。使得 component 看起来更像 dumb/pure component.

    可惜,我们产品的架构已经定了。要么就是 props,mapStateToPros, mapDispatchToProps 。不允许直接使用自定义的 context......
    dartabe
        22
    dartabe  
       2020-11-27 12:05:33 +08:00
    @yazoox 直接用 context 是不是不好 debug?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3265 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 10:47 · PVG 18:47 · LAX 03:47 · JFK 06:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.