Redux 與元件傳值的慣例與 Vuex 不同嗎？

react redux vue vuex

RenZhou 2022-06-16 02:49:53 ‧ 853 瀏覽

分享至

小弟使用 Vue 開發專案好幾年了，近期在學習透過 React 來建立專案，發現文件與一些教學影片對於元件間傳值的方式與以往 Vue 的方式有點不同，因此想上來問一下有經驗的大大的開發慣例為何。

假設今天要開發一個購物車的頁面
我在 Vue 以往的慣例都是把跟 Vuex 溝通的部分都寫在最外部的父元件
像是點擊了商品頁面中的「加入購物車」按鈕，也都是透過 Emit 到最外層才去呼叫 Vuex 的 action
傳遞資料也是，即便底下切了超多層子元件，所需要的資料例如「商品列表」，也都是從父元件一個一個透過 props 傳下去

但在 React 及 Redux 找到的資料好像都是各元件自去跟 Redux 溝通
像是「加入購物車」就直接在按鈕按下去要加入的資料直接塞給 Redux，而不需要將資料往回傳
或是商品的 filter，以往也是先拉完整的商品資料，到頁面中才去做 filter 等邏輯
現在是直接把 filter 直接寫在 redux 裡面，商品列表就直接用 useSelector 拿篩選過的商品列表

比較想知道業界普遍在 react 中遇到這種情況的慣例為何？
以前在 vue 也有看過類似的寫法，但也不多就是了
這樣子元件直接與 redux/vuex 溝通可以省去當子元件太多時會傳值傳到霧煞煞
但維護起來好像又會更難去追蹤？

在此先謝過大神！

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2022-06-16 08:47:44 檢舉

不是大神，但是我覺得你emit太多層反而更難追蹤吧?
vuex/pinia 的action本身就是全域，像你這樣emit到最上層再存取，這些狀態管理就沒意義了吧。

狀態管理本來就是為了解決有太多元件串葡萄造成耦合度高，其中一層修改你會改到死的問題產生的。

另外你怎麼會覺得全域都可存取會更難追蹤?