React Hooks - useReducer

我在 YouTube 上有一个视频，里面讲解得更详细。我也在那里更深入地解释了 Reducer 函数。

它是什么？

如果您需要处理更复杂的状态，useReducer 钩子非常适合使用。

如果您熟悉 Redux，它与它非常相似，只是您通常只会将它用于一个或两个组件。

复杂状态

假设您正在获取一些数据，并且想要显示：

获取过程中显示“正在加载...”
一旦获得数据
或错误（如果有）

您需要确保这三者保持同步。获取数据后，您需要确保数据没有加载且没有错误。如果出现错误，则表示数据未加载，也没有数据。

这是 useReducer 的一个很好的用例！

如何使用

我们需要将两个参数传入 useReducer hook。一个是 Reducer，用于管理状态；另一个是初始状态，用于开始工作。

我们的初始状态将是一个包含三个键的对象：加载、数据和错误。

我们的 Reducer 将监听三种不同的 Action 类型，并相应地更新状态。这三种 Action 类型分别是 fetchDataStart、fetchDataSuccess 和 fetchDataFail。

我们将它们放在我们的文件中，但在组件之外：

//App.js
import React, { useReducer } from 'react';

const initialState = {
  loading: false,
  data: null,
  error: null
}

const reducer = (state, action) => {
  switch (action.type) {
    case 'fetchDataStart':
      return {
        ...state,
        loading: true,
        data: null,
        error: null
      }
    case 'fetchDataSuccess':
      return {
        ...state,
        loading: false,
        data: action.data,
        error: null
      }
    case 'fetchDataFail':
      return {
        ...state,
        loading: false,
        data: null,
        error: 'whoops =/'
      }
    default: return state
   }
}

const App = () => {
  return (
    <h1>App Component</h1>
  )
}

注意，我们将它们保存在常量变量下：reducer和initialState。因此，我们将它们传递到 useReducer 钩子中。

const App = () => {
  useReducer(reducer, initialState);
  return (
    <h1>App Component</h1>
  )
}

useReducer 钩子将在一个数组中返回两件事：状态和用于更新状态的动作调度器。

我们将使用数组解构来抓取它们，类似于使用 useState 钩子的 state 和 setState。

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <h1>App Component</h1>
  )
}

调度动作

我们的 useReducer hook 已经全部设置完毕。现在，让我们开始使用它吧！

我们将创建一个用于获取数据的函数，并根据获取请求的状态分派不同的操作。

（我们正在通过 switch 语句和 case 子句在 reducer 中检查这些操作。）

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const fetchData = () => {
     dispatch({type: 'fetchDataStart'})
     fetch('ourbackend.com/data')
     .then(res => {
        dispatch({
          type: 'fetchDataSuccess',
          data: res.data
        })
     })
     .catch(error => {
        dispatch({type: 'fetchDataFail'})
     })
   }
   return (
      <h1>App Component</h1>
   )
}

访问状态

访问状态非常简单。 useReducer 在我们解构的数组中返回了。我们将其保存到常量变量中state。

该状态（我们的初始状态和更新后的状态）是一个对象。因此，我们可以像这样在组件中直接访问这些值：

  return (
     <h1>App Component</h1>
     <p>{state.loading}</p>
     <p>{state.data}</p>
     <p>{state.error}</p>
  )

结论

当不同状态相互依赖时，useReducer 钩子非常有用。

至于引入 Redux，如果整个应用程序的状态很复杂，我通常会这么做。如果只有一两个组件，我会使用 useReducer。

如果您喜欢了解类似的主题，请随时查看我的YouTube和Instagram。

希望这对某人有帮助，感谢您的阅读！

-安德鲁

文章来源：https://dev.to/techcheck/react-hooks-usereducer-pnj