React Redux | 小孩子才做選擇！ Hooks 和 Redux 我全都要！
前言
Hi ！大家好，我是神 Q 超人，歐買尬的，最近真的超級無敵忙，時間無論怎麼準備，都是到最後一點點才發現完全不夠用，會那麼忙其實是因為參加了「The F2E — 第二屆 前端 & UI 修練精神時光屋」，版切得太用力，連文章都沒什麼時間打 😭 ，今天偷了一點閒，就來提提 React Redux 的 Hooks 吧！
React Redux
關於 Redux 的使用方法，在「 React 與他的快樂小夥伴 Redux -基礎教學」和「 React 與他的快樂小夥伴 Redux -事件處理（Handling events）」兩篇文章裡都有提到，如果對它還不太熟的話，可以先快速讀過一遍，了解和 Component 的互動方式。
安裝或更新至 v7.1.0
在 React 生態圈內有關 Hooks 的套件，基本上都還在尖端上，因此要使用相關套件前記得都要確認版本，目前 React Redux 最新的 Hooks 版本為 v7.1.0 ，所以大家要記得安裝到正確版本：
npm install react-redux@7.1.0Reducer & Store
在新版的 React Redux 裡， Reducer 仍然是 Reducer ， Store 的創建方式也和以前一樣，因此這個部分就不多說了，文章中的範例會做個簡單的待辦事項，因此 Reducer 很單純：
createStore 和 Provider 的部分：
完成上方的配置後，就能在 Main Component 裡開始玩轉新的 Hooks API 了！
useSelector
這個 Hooks 的作用就是從 Store 中，將 Component 需要的 State 取出，如果有使用過 Redux Saga ，它的作用就很像 select ，只要透過 useSelector 什麼資料都輕易到手：
這真是傑出的一手，對吧！明顯能感覺到差異的是
Component 不需要再經過
Connect了！
既然不用 Connect ，那什麼 mapStateToProps 和 mapDispatchToProps ，也都可以說聲謝謝照顧，然後將它們砍掉。
確定能夠取得 State 後，接下來要做增加待辦事項的部分，這裡先使用 React 的 useState 做 Controlled Components ：
然後要繼續寫下去的時候赫然發現，
沒有 Connect 就沒有 dispatch 觸發 Reducer ，怎麼辦？
useDispatch
砍掉 mapDispatchToProps 總要付出代價的，這個代價叫做 useDispatch ，會讓你愛不釋手，因為它能夠直接回傳一個 dispatch 方法，可以直接透過它觸發 Reducer ，對！就是那麼簡單：
就是那麼簡單幾個 Hooks ，就能完成取 State 和觸發 Reducer ，上方的執行結果如下：
其實除了上方 useSelector 和 useDispatch 外還有一個 useStore 。
useStore
這一個 Hooks API 會回傳 Store 物件，你可以在特殊需求下對它做操作（例如： getState() 、 subscribe() 、 dispatch() 等等），但是不論是取值或執行事件，都應該直接選用 useSelector 和 useDispatch 更好。
簡單使用了 useSelector 和 useDispatch 兩個 Hooks，就把當初寫了兩篇文章的內容通通實作出來，而且程式碼還更簡潔直覺，文中的為了方便展示例子，把一些程式碼混在一起，如果有任何問題或是講解不清楚的部分，再麻煩各位留言告訴我，感激不盡 🙇
參考資料：
