如何使用useReducer Hook

为了保证的可读性，本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

这个礼拜《大迁世界》有抽奖活动，奖品：专栏 《左耳听风》 x3, 技术书 x5,欢迎关注回复：抽奖

看到“reducer”这个词，容易让人联想到Redux，可是在本文中，没必要先理解Redux才能阅读这篇文章。我们将一块儿讨论“reducer”其实是什么，以及如何利用useReducer来管理组件中的复杂状态，以及这个新钩子对Redux意味着什么？

Reducer 是什么鬼

若是你熟悉Redux或数组上中的reduce方法，你大概就知道“reducer”是什么。 若是不熟悉，“reducer”大概是一个带有2个值并返回1个值的函数这么个意思。

若是你有一系列的东西，而且想将这些东西组合成一个单独的物体。“函数式编程”中就是使用Array的reduce函数。 例如，若是你有一个数字数组而且想获得数组中全部数字的总和，我们就能够写一个reducer函数并将它传递给reduce，以下所示：

let numbers = [1, 2, 3];
let sum = numbers.reduce((total, number) => {
    return total + number;
},0)

若是你之前没用过这个，它可能看起来有点神秘。它所作的是为数组的每一个元素调用函数，传入前一个total和当前元素 number。不管你返回什么，都会成为新的total。reduce的第二个参数(在本例中为0)是total的初始值。在本例中，reduce函数会被调用3次：

• 调用 (0, 1) 返回 1
• 调用 (1, 2) 返回 3
• 调用 (3, 4) 返回 6

reduce返回6，它保存在sum中。

使用useReducer又会是什么样的？

各位花了在半篇幅来解释Array的reduce函数，由于 useReducer 参数与 reduce 相同，而且工做方式基本同样。 useReducer接收 (state, action) => newState，而且返回了一个与当前state成对的dispatch的方法。 我们使用 useReducer 来编写上面的求和例子。

useReducer((state, acton) => {
  return state + action
}, 0)

useReducer返回一个包含2个元素的数组，相似于useState hook。 第一个是当前状态，第二个是dispatch方法，以下所示：

const [sum, dispatch] = useReducer((state, action) => {
  return state + action
}, 0)

注意，state能够是任何值，它不必定是一个对象，能够是一个数字，一个数组，或者其余任何类型。

尽管 useReducer 是扩展的 hook， 而 useState 是基本的 hook，但 useState 实际上执行的也是一个 useReducer。这意味着 useReducer 是更原生的，你能在任何使用 useState 的地方都替换成使用 useReducer。

import React, { useReducer } from 'react';

function Counter() {
  // First render will create the state, and it will
  // persist through future renders
  const [sum, dispatch] = useReducer((state, action) => {
    return state + action;
  }, 0);

  return (
    <>
      {sum}

      <button onClick={() => dispatch(1)}>
        Add 1
      </button>
    </>
  );
}

点击按钮dispatch一个值为1的action，该action将被添加到当前状态，而后组件使用新的状态从新渲染。

这里故意展现了，派发action没有遵循Redux的典型模式{type: "INCREMENT BY"、value: 1}或其余相似的东西。hook 的世界是一个新的世界:值得考虑的是，你是否发现旧的模式有价值并但愿保留它们，或者你是否愿意更改它们。

一些更复杂的例子

再来看看更接近典型Redux reducer 的例子。建立一个组件来管理购物列表，这里看还会使用另一个 hook:useRef。

首先，导入两个 hook

import React, { useReducer, useRef } from 'react';

而后建立一个设置ref和reducer的组件。 ref保存对表单的引用，以便我们能够提取其值。

function ShoppingList() {
  const inputRef = useRef();
  const [items, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      // do something with the action
    }
  }, []);

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input ref={inputRef} />
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            {item.name}
          </li>
        ))}
      </ul>
    </>
  );
}

请注意，在这种状况下，我们的“state”是一个数组。 我们经过useReducer第二个参数将它初始化为一个空数组，并从reducer函数返回一个数组。

useRef Hook

useRef hook为DOM节点建立持久引用。 调用useRef会建立一个空的节点。它返回的对象具备current属性，所以在上面的示例中，我们可使用inputRef.current访问输入的DOM节点。 若是你熟悉React.createRef()，则其工做原理很是类似。

可是，useRef返回的对象不只仅是一种保存DOM引用的方法。 它能够保存特定于此组件实例的任何值，而且它在渲染之间保持不变。

useRef可用于建立通用实例变量，就像使用具备this.whatever = value的React类组件同样。 惟一的问题是，写入它会被视为“反作用”，所以我们没法在渲染过程当中更改它，须要在useEffect hook 中才能修改。

回到useReducer示例

咱们用表单来处理用户的输入，按回车提交表彰。 如今来编写handleSubmit函数，该函数主要作的是将一个项添加到列表中，以及处理reducer中的 action。

function ShoppingList() {
  const inputRef = useRef();
  const [items, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'add':
        return [
          ...state,
          {
            id: state.length,
            name: action.name
          }
        ];
      default:
        return state;
    }
  }, []);

  function handleSubmit(e) {
    e.preventDefault();
    dispatch({
      type: 'add',
      name: inputRef.current.value
    });
    inputRef.current.value = '';
  }

  return (
    // ... same ...
  );
}

在reducer函数中主要判断两种状况：一种用于action.type==='add'的状况，还有就是默认下的状况。

当action.type为 add 时，它返回一个包含全部旧元素的新数组，以及最后的新元素。

这里有一点须要注意的是，我们使用数组的length做为一种自动递增的 ID 方便演示，可是对于一个真正的应用程序来讲这是不可靠，由于它可能致使重复的ID和bug。(最好使用uuid这样的库，或者让服务器生成一个唯一的ID!)

当用户在输入框中按Enter键时会调用handleSubmit函数，所以我们须要调用preventDefault以免在发生这种状况时从新加载整页。 而后dispatch派发一个 action。

删除项

如今来看看如何从列表中删除项的。

在项目中添加一个删除<button>，点击该按钮派发 它将发送一个 action type === "remove"的操做，以及要删除的项的索引。

而后我们只须要在reducer中处理该action

function ShoppingList() {
  const inputRef = useRef();
  const [items, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'add':
        // ... same as before ...
      case 'remove':
        // keep every item except the one we want to remove
        return state.filter((_, index) => index != action.index);
      default:
        return state;
    }
  }, []);

  function handleSubmit(e) { /*...*/ }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input ref={inputRef} />
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            {item.name}
            <button
              onClick={() => dispatch({ type: 'remove', index })}
            >
              X
            </button>
          </li>
        ))}
      </ul>
    </>
  );
}

练习:清空列表

试着添加一个功能：添加一个清空列表的按钮。

在<ul>上方插入一个按钮，并为其提供一个onClick prop，派发一个action ,type 为“clear”的动做，并在 reducer 方法执行清空列表的动做。

能够在前面 CodeSandbox的基础上完成。

Redux 会死吗

大部分人看到useReducer hook, React 如今已经内置了reducer ，它有Context传递数据，因此可能会想到 Redux 会不会所以就死了，如下是原做者给出的一些见解。

做者不认为useReducer会杀死Redux。React Hook 扩展了React在状态管理方面的能力，因此会让使用 Redux的状况减小。

Redux仍然比Context + useReducer的组合作得更多，它具备Redux DevTools 用于调试，可定制中间件、，以及整个相关库生态系统，固然 Redu x在不少地方都被过分使用了，但它仍然具备强大的功能。

Redux提供了一个全局存储，能够在其中集中保存应用程序数据。useReducer本地化到特定组件。可是，没有什么能够阻止我们使用useReducer和useContext构建本身的迷你redux 。若是你想这么作，并且符合你的须要，那就去作吧!

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。