【譯】基於Hooks 的 Redux 速成課

原文： Redux Crash Course with Hooks 🎣
做者：Chris Achard
譯者：博軒
爲保證文章的可讀性，本文采用意譯

你對 Redux 感到困惑嗎？
若是使用新的 Redux Hooks，會更加簡單！
這裏是一個關於 Redux 的速成班，將配合 React 函數組件使用：

1.

Redux 使您能夠集中存放 JavaScript 應用程序的狀態（數據）

它最常與 React 一塊兒使用（經過 react-redux ）

這使您能夠從樹中的任何組件訪問或更改狀態。

2.

應用的狀態被集中存放於 Redux store

該 store 是使用稱爲 「reducer」 的函數所建立的

reducer 接受一個 state 和一個 action ，
並返回相同或新的狀態

3.

使用 react-redux 中的 Provider 來爲你的應用提供 store。

使用 Provider 來包裝你的應用入口，以便應用程序中的任何組件均可以訪問 store 中的數據

4.

要從 store 中取出數據，請使用 react-redux 提供的自定義 hook ：useSelector 。

selector 只是一個有趣的詞：「從 store 獲取數據的功能」

而後，向 useSelector 中傳入回調，該回調中可獲取整個 redux 的狀態，您只需選擇該組件所需的內容

5.

action 是普通的 JavaScript 對象

全部 action 均應具備 「type」 鍵

它們可能還具備其餘鍵（參數）

6.

Actions 不是「調用」的，而是「分配」給 reducer 的
Action 的 type 屬性告訴 reducer 接下來該作什麼 （返回新狀態或舊狀態）

7.

要更改 store 中的數據，請首先編寫您的 reducer：

reducer 一般使用 switch / case 語句編寫，但不是必要的

他們只須要獲得一個動做和一個狀態，而後返回一個新狀態

8.

重要的是，reducer 返回一個新的狀態對象（而不是修改舊的對象的屬性），這樣，當對象中的屬性發生某些改變時，組件將從新渲染。

不要在 reducer 中修改 state 中的值，僅返回一個值已經更改的擁有新狀態的對象。

9.

要分派 action ，請使用 react-redux 中的自定義 hook： useDispatch

用一個 action 對象來調用 useDispatch，

將傳入 reducers 函數並運行，

有可能改變應用的狀態

10.

全部鏈接的組件（調用 useSelector ）將自動得到新的狀態

就像 props 或者 state 改變同樣 - useSelector 將自動檢測更改，React 將從新渲染組件。

總結

Redux 能夠以更復雜的方式使用，但核心始終是：

• 一、 向 store 發送 action
• 二、 經過 reducer 可能會或可能不會改變狀態
• 三、 使用選擇器訪問狀態
• 四、 狀態的改變將自動從新刷新您的應用

💯

codeandbox 示例代碼