[React Hook 筆記] useReducer 真的能完全取代 Redux 嗎?

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

先回答標題的答案，不能！ 完整解釋放在最後

🔖 文章索引
1. What’s useReducer?
2. Redux vs useReducer
3. 總結

What’s useReducer?

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method.
(If you’re familiar with Redux, you already know how this works.)

進階版的 useState

useState 的底層其實也是是用 useReducer 實踐的呢 ! 兩者同樣都是拿來儲存、更新資料。但說是進階版因為useReducer 不但可以替換任何 useState且能處理更複雜的邏輯。
(以下範例用 useReducer是殺雞用牛刀之不必要，但只是想展示兩種用法都可以達到一樣結果)

左 useState 點原始碼 / 右 useReducer 點原始碼

概念跟 Redux 80% 相像

學過 Redux 的人完全可以輕易上手，他們的核心之用 Action、Reducer、Store 傳遞資料的觀念基本上是一模一樣的

Redux: 他抄我
useReducer: 顆顆對啊不行嗎