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