手摸手教你基于Hooks 的 Redux 實戰(zhàn)姿勢
原文：Redux Crash Course with Hooks ?[1]?作者：Chris Achard 譯者：博軒 為保證文章的可讀性，本文采用意譯
你對 Redux 感到困惑嗎？如果使用新的 Redux Hooks，會更加簡單！這里是一個關于 Redux 的速成班，將配合 React 函數(shù)組件使用：
1.
Redux 使您可以集中存放 JavaScript 應用程序的狀態(tài)（數(shù)據(jù)）
它最常與 React 一起使用（通過 react-redux ）
這使您可以從樹中的任何組件訪問或更改狀態(tài)。
2.
應用的狀態(tài)被集中存放于 Redux store
該 store 是使用稱為 “reducer” 的函數(shù)所創(chuàng)建的
reducer 接受一個 state 和一個 action ， 并返回相同或新的狀態(tài)
3.
使用 react-redux 中的?Provider?來為你的應用提供 store。
使用?Provider?來包裝你的應用入口，以便應用程序中的任何組件都可以訪問 store 中的數(shù)據(jù)
4.
要從 store 中取出數(shù)據(jù)，請使用 react-redux 提供的自定義 hook ：useSelector?。
selector?只是一個有趣的詞：“從 store 獲取數(shù)據(jù)的功能”
然后，向?useSelector?中傳入回調(diào)，該回調(diào)中可獲取整個 redux 的狀態(tài)，您只需選擇該組件所需的內(nèi)容
5.
action 是普通的 JavaScript 對象
所有 action 均應具有?“type”?鍵
它們可能還具有其他鍵（參數(shù)）
6.
Actions 不是“調(diào)用”的，而是“分配”給 reducer 的 Action 的?type?屬性告訴 reducer 接下來該做什么 （返回新狀態(tài)或舊狀態(tài)）
7.
要更改 store 中的數(shù)據(jù)，請首先編寫您的 reducer：
reducer 通常使用?switch / case?語句編寫，但不是必要的
他們只需要得到一個動作和一個狀態(tài)，然后返回一個新狀態(tài)
8.
重要的是，reducer 返回一個新的狀態(tài)對象（而不是修改舊的對象的屬性），這樣，當對象中的屬性發(fā)生某些改變時，組件將重新渲染。
不要在 reducer 中修改?state?中的值，僅返回一個值已經(jīng)更改的擁有新狀態(tài)的對象。
9.
要分派 action ，請使用 react-redux 中的自定義 hook：?useDispatch
用一個 action 對象來調(diào)用?useDispatch，
將傳入?reducers?函數(shù)并運行，
有可能改變應用的狀態(tài)
10.
所有連接的組件（調(diào)用 useSelector ）將自動獲得新的狀態(tài)
就像 props 或者 state 改變一樣 - useSelector 將自動檢測更改，React 將重新渲染組件。
總結(jié)
Redux 可以以更復雜的方式使用，但核心始終是：
?1、 向 store 發(fā)送 action?2、 通過 reducer 可能會或可能不會改變狀態(tài)?3、 使用選擇器訪問狀態(tài)?4、 狀態(tài)的改變將自動重新刷新您的應用
?
codeandbox 示例代碼[2]
References
[1]?Redux Crash Course with Hooks ?:?https://dev.to/chrisachard/redux-crash-course-with-hooks-a54[2]?codeandbox 示例代碼:?https://codesandbox.io/s/redux-count-hrdtd?fontsize=14