react钩子_迷上了钩子：如何使用React的useReducer（）

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.