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

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

  •  
  •   yazoox · 14 天前 · 1105 次点击

    公司的项目,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   14 天前
    gouflv
        2
    gouflv   14 天前 via iPhone
    跟 redux 说再见吧
    tonyYo
        3
    tonyYo   14 天前
    花了大力气弃用了 redux
    yazoox
        4
    yazoox   14 天前
    @gouflv 这个,真的放弃不了啊。以前的那套框架,写了好多代码。顶多只能新代码改进一下。
    joesonw
        5
    joesonw   14 天前
    爷父子传递的话还用什么 redux 啊.
    zqx
        6
    zqx   14 天前 via Android
    用 React 的 Context API 简单一些吧?
    baxtergu
        7
    baxtergu   14 天前
    你都用 saga 了就还是按照 saga 那套中心化 store 的模式来吧。如果想在组件内使用 hooks,那就在你的页面最外层包一层 conncect 把 dispatch 和 store 传进去(可以爷父子一层一层,也可以创建一个 context 直接隔着传下去),里面的消费组件只要写好 effect 处理好引用变更就好了。
    KuroNekoFan
        8
    KuroNekoFan   14 天前
    我反正挺讨厌那种一板一眼的写法的,有的人喜欢
    只能打一架了
    KuroNekoFan
        9
    KuroNekoFan   14 天前
    但是让不要用 useDispatch 明显就有问题了,hooks 出现的其中一个原因就是为了让人规避 connect 这种 hoc
    dartabe
        10
    dartabe   14 天前
    别用 HOC 你每个模块还要写个连接完全是浪费时间

    当然只是我的个人看法 希望有大佬来说说
    duan602728596
        11
    duan602728596   14 天前
    没啥说法,推荐使用 useDispatch
    matatabi
        12
    matatabi   14 天前
    一直在用 dva,hooks 还没有用上
    nav4e
        13
    nav4e   14 天前
    看起来主要还是为了区分 Container 和 Presentational 组件

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

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

    系统级需要用的数据,用户的基本信息,系统配置,ws 传过来的数据;
    Qinmei
        17
    Qinmei   13 天前
    redux 的 useSelector 以及 useDispatch 就是给 hook 用的,如果你用 hooks 还要先 connect,那相当于不用啊

    如果说直接用跟业务不太匹配,那也可以自行封装一套,redux 只是一种思想范式,如果连代码都要样板化,那才是真的限制死了
    xi_lin
        18
    xi_lin   9 天前
    CR 的时候那个人的理由是啥?
    yazoox
        19
    yazoox   8 天前
    @nav4e "如果是出现传递层级太深, 建议定好 context 的 api, 走 context"
    这个能具体多说两句么?前半句明白,我们现在已经有点这个苗头了。后半两句,不知道怎么弄?
    谢谢。
    nav4e
        20
    nav4e   8 天前
    @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   7 天前
    @nav4e thx.
    其实,redux 操作对象也是 context,只是用它那套包装了一下。
    不过,直接使用 context,能够减少 redux 的依赖。使得 component 看起来更像 dumb/pure component.

    可惜,我们产品的架构已经定了。要么就是 props,mapStateToPros, mapDispatchToProps 。不允许直接使用自定义的 context......
    dartabe
        22
    dartabe   6 天前
    @yazoox 直接用 context 是不是不好 debug?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3498 人在线   最高记录 5298   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 11:26 · PVG 19:26 · LAX 03:26 · JFK 06:26
    ♥ Do have faith in what you're doing.