react鉤子
So the React Conference just happened and as always something new happened. Hooks happened! The React team talked about suspense, lazy loading, concurrent rendering, and hooks :D.
因此，React會議剛剛發生，并且一如既往地發生了一些新情況。 鉤子發生了！ React團隊討論了懸念，延遲加載，并發渲染和鉤子 ：D。
Now I’ll talk about my favorite hook useReducer and how you use it.
現在，我將討論我最喜歡的鉤子useReducer以及如何使用它。
In my PokemonInfo component, I have:
在我的PokemonInfo組件中，我有：
const [{ count, loading }, dispatch] = useReducer(reducer, initialState);Which is equivalent to:
等效于：
const [state, dispatch] = useReducer(reducer, initialState);
const { count, loading } = state;So what is const [state, dispatch] = useReducer(param1, param2) Let’s first talk about array destructuing which is happening below.
那么什么是const [state, dispatch] = useReducer(param1, param2)首先讓我們談談數組解構 這正在發生在下面。
const [state, dispatch] = useReducer(initialState);Here’s an example of array destructing:
這是數組銷毀的示例：
let myHeroes = ['Ant man', 'Batman']; // Mixing DC & Marvel :D
let [marvelHero, dcHero] = myHeroes; // destructuring array
/**
* myHeroes[0] == marvelHero => is 'Ant man'
* myHeroes[1] == dcHero => is 'Batman'
*/So the method useReducer has two items in its array state and dispatch. Also the useReducer takes in two parameters: one is reducer the other is initial-state.
因此，方法useReducer的數組state和dispatch有兩個項目。 useReducer接受兩個參數：一個是reducer ，另一個是initial-state 。
In the useReducer param reducer, I pass in:
在useReducer參數reducer ，我傳入：
const reducer = (state, action) => {switch (action.type) {case 'increment': {return { ...state, count: state.count + 1, loading: false };}case 'decrement': {return { ...state, count: state.count - 1, loading: false };}case 'loading': {return { ...state, loading: true };}default: {return state;}}
};What this does is it takes in two arguments. One is the current state of the reducer and the other is the action. The action.type decides how it will update the reducer and return a new state to us.
這樣做是有兩個參數的。 一個是減速器的當前狀態，另一個是動作。 action.type決定如何更新減速器并向我們返回新狀態。
So if the action.type === increment
因此，如果action.type === increment
case 'increment': { return { ...state, count: state.count + 1, loading: false };
}…it will return the state, which will have its count updated to +1 and loading set to false. Also where it says state.count + 1 here the state is actually the previous state.
…它將返回狀態，該狀態的計數將更新為+1并將加載設置為false 。 還在上面說state.count + 1地方，這里的state實際上是先前的狀態。
In useReducer param initialState I pass in:
在useReducer參數initialState我傳入：
const initialState = { loading: false, count: 0
};So if this is the initial state, the useReducer method returns two items from its array, state and dispatch. The state method is an object which has two keys count & loading that I destructure in my destructured array.
因此，如果這是初始狀態，則useReducer方法從其數組中返回兩項，即state和dispatch 。 state方法是一個具有兩個鍵count & loading的對象，我在已解構數組中對其進行了解構。
So I destructure an array, and inside the array, I destructure an object on the first index of the array like below.
因此，我解構了一個數組，然后在數組內部，對一個對象進行了解構，該對象位于數組的第一個索引上，如下所示。
const [{ count, loading }, dispatch] = useReducer(reducer, initialState);Also I have a method called delay
我也有一種叫做delay的方法
// return true after 1500ms in time argument is passed to.
const delay = (time = 1500) => { return new Promise(resolve => { setTimeout(() => { resolve(true); }, time); });
};Now in my render method when I click the + button
現在在我的渲染方法中，當我單擊+按鈕時
<button type="button" onClick={onHandleIncrement}>+</button>the onHandleIncrement function is executed, which does the following:
執行onHandleIncrement函數，該函數執行以下操作：
const onHandleIncrement = async () => { dispatch({ type: 'loading' }); await delay(500); dispatch({ type: 'increment' });
};It initially sets loading to true, adds a delay of 500ms and then increments the counter. Now I know this is not a real world case example, but it explains the point as to how a reducer works.
最初將loading設置為true，添加500ms的延遲，然后遞增計數器。 現在，我知道這不是一個真實的案例，但是它解釋了減速器如何工作的要點。
Last thing:
最后一件事：
<p>Count {loading ? 'loading..' : count}</p>If loading is true, I show Count loading.. else I show Count {value}.
如果loading為true，則顯示Count loading..否則顯示Count {value} 。
This is how it looks in the UI:
這是它在UI中的外觀：
I tried replicating Dan Abramov’s code that he showcased at the React Conference 2018. Here is the link to the code repository. Enjoy. :)
我嘗試復制Dan Abramov在React Conference 2018上展示的代碼。這是代碼庫的鏈接。 請享用。 :)
Kindly do note that hooks are in an alpha version of React, and are in no way advised to be used in production. But there is a strong possibility that they will become a huge part of the eco-system in the future. So you should start playing around with react hooks now.
請注意，掛鉤是React的alpha版本，絕不建議在生產中使用。 但是它們很可能在將來成為生態系統的重要組成部分。 因此，您現在應該開始使用react掛鉤。
翻譯自: https://www.freecodecamp.org/news/hooked-on-hooks-how-to-use-reacts-usereducer-2fe8f486b963/
react鉤子
