小弟使用 Vue 開發專案好幾年了，近期在學習透過 React 來建立專案，發現文件與一些教學影片對於元件間傳值的方式與以往 Vue 的方式有點不同，因此想上來問一下有經驗的大大的開發慣例為何。
假設今天要開發一個購物車的頁面
我在 Vue 以往的慣例都是把跟 Vuex 溝通的部分都寫在最外部的父元件
像是點擊了商品頁面中的「加入購物車」按鈕，也都是透過 Emit 到最外層才去呼叫 Vuex 的 action
傳遞資料也是，即便底下切了超多層子元件，所需要的資料例如「商品列表」，也都是從父元件一個一個透過 props 傳下去
但在 React 及 Redux 找到的資料好像都是各元件自去跟 Redux 溝通
像是「加入購物車」就直接在按鈕按下去要加入的資料直接塞給 Redux，而不需要將資料往回傳
或是商品的 filter，以往也是先拉完整的商品資料，到頁面中才去做 filter 等邏輯
現在是直接把 filter 直接寫在 redux 裡面，商品列表就直接用 useSelector 拿篩選過的商品列表
比較想知道業界普遍在 react 中遇到這種情況的慣例為何？
以前在 vue 也有看過類似的寫法，但也不多就是了
這樣子元件直接與 redux/vuex 溝通可以省去當子元件太多時會傳值傳到霧煞煞
但維護起來好像又會更難去追蹤？
在此先謝過大神！
已邀請的邦友 {{ invite_list.length }}/5
iThome鐵人賽
看影片追技術