useReducer是与React v16.8一起发布的附加Hook之一。作为useState Hook的替代品，useReducer有助于管理React应用程序中的复杂状态逻辑。当与useContext等其他Hook结合使用时，useReducer可以很好地替代Redux、Recoil或MobX。在某些情况下，它是一个更好的选择。

虽然Redux、Recoil和MobX通常是管理大型React应用程序全局状态的最佳选择，但许多React开发者在本可以有效地使用Hooks处理状态时，过早地转向这些第三方状态管理库。在本文章中，我们将深入探讨useReducer Hook。

useReducer Hook是如何工作的？

useReducer Hook用于存储和更新状态，就像useState Hook一样。它接受一个reducer函数作为其第一个参数，并将初始状态作为第二个参数。useReducer返回一个数组，包含当前状态值和一个dispatch函数，你可以向其传递一个动作并在之后调用它。虽然这与Redux使用的模式类似，但有一些差异。

例如，useReducer函数与特定的reducer紧密耦合。我们只向该reducer分发动作对象，而在Redux中，分发函数将动作对象发送到存储。在分发时，组件不需要知道哪个reducer将处理该动作。

对于那些可能不熟悉Redux的人，我们将更深入地探讨这个概念。Redux有三个主要构建块：

• 存储：一个不可变的存储应用程序状态数据的对象
• Reducer：一个函数，根据动作type返回一些状态数据
• 动作：一个告诉reducer如何更改状态的对象。它必须包含一个type属性，并且可以包含一个可选的payload属性

让我们看看这些构建块如何与管理useReducer Hook的状态相比较。以下是Redux中的存储示例：

jsx
 代码解读
复制代码
import { createStore } from 'redux'

const store = createStore(reducer, [preloadedState], [enhancer])

在下面的代码中，我们使用useReducer Hook初始化状态：

jsx
 代码解读
复制代码
const initialState = { count: 0 }

const [state, dispatch] = useReducer(reducer, initialState)

Redux中的reducer函数将接受之前的应用程序状态和被分发的动作，计算下一个状态，并返回新对象。Redux中的reducers遵循以下语法：

jsx
 代码解读
复制代码
(state = initialState, action) => newState

考虑以下示例：

jsx
 代码解读
复制代码
// 注意state = initialState和返回一个新状态

const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      case ‘ITEMS_REQUEST_SUCCESS’:
         return Object.assign({}, state, {
            items: state.items.concat(action.items),
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}
export default reducer;

useReducer不使用(state = initialState, action) => newState的Redux模式，因此其reducer函数的工作方式略有不同。下面的代码显示了如何使用React的useReducer创建reducers：

jsx
 代码解读
复制代码
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

以下是一个可以在Redux中执行的动作示例：

jsx
 代码解读
复制代码
{ type: ITEMS_REQUEST_SUCCESS, payload: { isLoading: false } }

// 动作创建者
export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      payload: {
      isLoading: bool,
    }
   }
}

// 使用Redux分发动作
dispatch(itemsRequestSuccess(false))    // 要调用分发函数，你需要将动作作为参数传递给分发函数

useReducer中的动作工作方式类似：

jsx
 代码解读
复制代码
// 不是完整代码
switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    default:
      throw new Error();
  }

// 使用useReducer分发动作
 () => dispatch({type: 'increment'})}>Increment

如果上述代码中的action类型是increment，我们的状态对象将增加1。

reducer函数

JavaScript的reduce()方法在数组的每个元素上执行一个reducer函数，并返回一个单一值。reduce()方法接受一个reducer函数，该函数本身可以接受多达四个参数。下面的代码片段说明了reducer的工作方式：

jsx
 代码解读
复制代码
const reducer = (accumulator, currentValue) => accumulator + currentValue;
[2, 4, 6, 8].reduce(reducer)
// 预期输出：20

在React中，useReducer本质上接受一个reducer函数，该函数返回一个单一值：

jsx
 代码解读
复制代码
  const [count, dispatch] = useReducer(reducer, initialState);

reducer函数本身接受两个参数并返回一个值。第一个参数是当前状态，第二个是动作。状态是我们正在操作的数据。reducer函数接收一个动作，由dispatch函数执行：

jsx
 代码解读
复制代码
function reducer(state, action) { }

dispatch({ type: 'increment' })

动作就像你传递给reducer函数的指令。基于指定的动作，reducer函数执行必要的状态更新。如果你之前使用过像Redux这样的状态管理库，那么你可能已经遇到过这种状态管理模式。

指定初始状态

传递给useReducer Hook的第二个参数是初始状态，它代表默认状态：

jsx
 代码解读
复制代码
const initialState = { count: 1 }

// 我们的useReducer所在的位置
const [state, dispatch] = useReducer(reducer, initialState, initFunc)

如果你没有向useReducer传递第三个参数，它将把第二个参数作为初始状态。第三个参数，即init函数，是可选的。这种模式也遵循Redux状态管理的一个黄金规则：状态应该通过发出动作来更新。永远不要直接写入状态。

然而，值得注意的是，Redux的state = initialState约定与useReducer的工作方式不同，因为初始值有时取决于props。

延迟创建初始状态

在编程中，延迟初始化是一种策略，它将对象的创建、值的计算或其他一些昂贵的过程推迟到第一次需要时。

如上所述，useReducer可以接受第三个参数，这是一个可选的init函数，用于延迟创建初始状态。它允许你将计算初始状态的逻辑提取到reducer函数之外，如下所示：

jsx
 代码解读
复制代码
const initFunc = (initialCount) => {
    if (initialCount !== 0) {
        initialCount=+0
    }
  return {count: initialCount};
}

// 我们的useReducer所在的位置
const [state, dispatch] = useReducer(reducer, initialCount, initFunc);

如果值不是0，上面的initFunc将在页面挂载时将initialCount重置为0，然后返回状态对象。注意，这个initFunc是一个函数，不仅仅是一个数组或对象。

React中的dispatch

dispatch函数接受一个表示我们想要执行的动作类型的参数。基本上，它将动作类型发送给reducer函数以执行其工作，当然是更新状态。把dispatch想象成一个信使，它将指令（动作）传递给状态管理器（reducer）。

要由我们的组件分发的动作应该总是表示为一个包含type和payload键的对象，其中type作为分发动作的标识符，payload是这个动作将添加到状态的信息。dispatch是useReducer Hook返回的第二个值，可以在JSX中用于更新状态：

jsx
 代码解读
复制代码
// 创建我们的reducer函数
function reducer(state, action) {
  switch (action.type) {
   // ...
      case 'reset':
          return { count: action.payload };
    default:
      throw new Error();
  }
}

// 我们的useReducer所在的位置
const [state, dispatch] = useReducer(reducer, initialCount, initFunc);

// 在按钮点击时使用dispatch函数更新状态
<button onClick={() => dispatch({type: 'reset', payload: initialCount})}> 重置 button>

注意我们的reducer函数如何使用从dispatch函数传递的payload。它将我们的状态对象设置为payload，即initialCount是什么。请注意，我们可以将dispatch函数作为props传递给其他组件，这允许我们用useReducer替换Redux。

假设我们有一个组件，我们想要将dispatch函数作为props传递。我们可以很容易地从父组件中做到这一点：

jsx
 代码解读
复制代码
<Increment count={state.count} handleIncrement={() => dispatch({type: 'increment'})}/>

现在，在子组件中，我们接收props，当发出时，将触发dispatch函数并更新状态：

jsx
 代码解读
复制代码
Increment

退出分发

如果useReducer Hook返回的值与当前状态相同，React将不会渲染子组件或触发效果，因为它使用Object.is比较算法。

使用useReducer Hook构建一个简单的计数器应用程序

现在，让我们将我们的知识应用于使用useReducer Hook构建一个简单的计数器应用程序：

jsx
 代码解读
复制代码
import React, { useReducer } from 'react';

const initialState = { count: 0 }
 // 减少器函数
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return {count: state.count = 0}
    default:
     return { count: state.count  }
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div>
      Count: {state.count}
       <br />
       <br/>
       <button onClick={() => dispatch({ type: 'increment' })}>Incrementbutton>
       <button onClick={() => dispatch({ type: 'decrement'})}>Decrementbutton>
       <button onClick={() => dispatch({ type: 'reset'})}>Resetbutton>
    div>
  );
};

export default Counter;

首先，我们用0初始化状态，然后我们创建一个reducer函数，它接受我们的计数的当前状态作为参数和一个动作。状态由reducer根据动作类型更新。increment、decrement和reset都是动作类型，当分发时，相应地更新我们的应用程序的状态。

要增加状态计数const initialState = { count: 0 }，我们只需在分发increment动作类型时将count设置为state.count + 1。

useState与useReducer

useState是一个用于管理简单状态转换的基本Hook，而useReducer是一个用于管理更复杂状态逻辑的附加Hook。然而，值得注意的是，useState在内部使用useReducer，这意味着你可以用useReducer做所有可以用useState做的事情。

然而，这两个Hook之间有一些主要区别。使用useReducer，你可以避免将回调通过不同级别的组件传递。相反，useReducer允许你传递一个提供的dispatch函数，这反过来可以提高触发深层更新的组件的性能。

然而，这并不意味着useState的更新函数在每次渲染时都被新调用。当你有复杂的逻辑更新状态时，你不会直接使用setter来更新状态。相反，你会编写一个复杂的函数，该函数反过来会用更新后的状态调用setter。

因此，建议使用返回dispatch方法的useReducer，它在重新渲染之间不会改变，并允许你在reducers中拥有操作逻辑。

还值得注意的是，使用useState时，状态更新函数被调用以更新状态，但使用useReducer时，dispatch函数被调用，并且至少传递一个类型的动作给它。现在，让我们看看两个Hook是如何声明和使用的。

---

使用useState声明状态

useState返回一个数组，包含当前状态值和用于更新状态的setState方法：

jsx
 代码解读
复制代码
const [state, setState] = useState('default state');

使用useReducer声明状态

useReducer返回一个数组，包含当前状态值和一个dispatch方法，逻辑上实现了与setState相同的目标，更新状态：

jsx
 代码解读
复制代码
const [state, dispatch] = useReducer(reducer, initialState)

使用useState更新状态如下：

ini
 代码解读
复制代码
type='text' value={state} onChange={(e) => setState(e.currentTarget.value)} />

使用useReducer更新状态如下：

jsx
 代码解读
复制代码
() => dispatch({ type: 'decrement'})}>Decrement

我们将在本教程后面更深入地讨论dispatch函数。可选地，动作对象也可以有一个payload：

jsx
 代码解读
复制代码
() => dispatch({ type: 'decrement', payload: 0})}>Decrement

useReducer在管理复杂状态形状时很有用，例如，当状态包含不仅仅是原始值，如嵌套数组或对象时：

jsx
 代码解读
复制代码
const [state, dispatch] = useReducer(loginReducer,
  {
    users: [
      { username: 'Philip', isOnline: false},
      { username: 'Mark', isOnline: false },
      { username: 'Tope', isOnline: true},
      { username: 'Anita', isOnline: false },
    ],
    loading: false,
    error: false,
  },
);

管理这种本地状态更容易，因为参数相互依赖，所有逻辑都可以封装到一个reducer中。

何时使用useReducer Hook

随着应用程序的增长，你可能会处理更复杂的状态转换，此时使用useReducer会比较好。useReducer比useState提供更可预测的状态转换，这在你想要在渲染函数中管理状态时变得尤为重要，就像状态变化变得如此复杂，你想要有一个管理状态的地方一样。

当你不再管理原始数据，即字符串、整数或布尔值，而必须管理复杂的对象，如数组和额外的原始数据时，useReducer是更好的选择。

创建一个登录组件

为了更好地理解何时使用useReducer，让我们创建一个登录组件，并比较我们如何使用useState和useReducer Hook来管理状态。

首先，我们使用useState创建登录组件：

jsx
 代码解读
复制代码
import React, { useState } from 'react';

export default function LoginUseState() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, showLoader] = useState(false);
  const [error, setError] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');
    showLoader(true);
    try {
        await new Promise((resolve, reject) => {
          setTimeout(() => {
            if (username === 'ejiro' && password === 'password') {
              resolve();
            } else {
              reject();
            }
          }, 1000);
        });
          setIsLoggedIn(true);

    } catch (error) {
      setError('Incorrect username or password!');
      showLoader(false);
      setUsername('');
      setPassword('');
    }
  };
  return (
    <div className='App'>
      <div className='login-container'>
        {isLoggedIn ? (
          <>
            <h1>Welcome {username}!h1>
            <button onClick={() => setIsLoggedIn(false)}>Log Outbutton>
          
        ) : (
          <form className='form' onSubmit={onSubmit}>
            {error && <p className='error'>{error}p>}
            <p>Please Login!p>
            <input
              type='text'
              placeholder='username'
              value={username}
              onChange={(e) => setUsername(e.currentTarget.value)}
            />
            <input
              type='password'
              placeholder='password'
              autoComplete='new-password'
              value={password}
              onChange={(e) => setPassword(e.currentTarget.value)}
            />
            <button className='submit' type='submit' disabled={isLoading}>
              {isLoading ? 'Logging in...' : 'Log In'}
            button>
          form>
        )}
      div>
    

jsx
 代码解读
复制代码
import React, { useReducer } from 'react';

function loginReducer(state, action) {
  switch (action.type) {
    case 'field': {
      return {
        ...state,
        [action.fieldName]: action.payload,
      };
    }
    case 'login': {
      return {
        ...state,
        error: '',
        isLoading: true,
      };
    }
    case 'success': {
      return {
        ...state,
        isLoggedIn: true,
        isLoading: false,
      };
    }
    case 'error': {
      return {
        ...state,
        error: 'Incorrect username or password!',
        isLoggedIn: false,
        isLoading: false,
        username: '',
        password: '',
      };
    }
    case 'logOut': {
      return {
        ...state,
        isLoggedIn: false,
      };
    }
    default:
      return state;
  }
}

const initialState = {
  username: '',
  password: '',
  isLoading: false,
  error: '',
  isLoggedIn: false,
};

export default function LoginUseReducer() {
  const [state, dispatch] = useReducer(loginReducer, initialState);
  const { username, password, isLoading, error, isLoggedIn } = state;
  const onSubmit = async (e) => {
    e.preventDefault();
    dispatch({ type: 'login' });
    try {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          if (username === 'ejiro' && password === 'password') {
            resolve();
          } else {
            reject();
          }
        }, 1000);
      });
      dispatch({ type: 'success' });
    } catch (error) {
      dispatch({ type: 'error' });
    }
  };

  return (
    <div className='App'>
      <div className='login-container'>
        {isLoggedIn ? (
          <>
            <h1>Welcome {username}!h1>
            <button onClick={() => dispatch({ type: 'logOut' })}>
              Log Out
            button>
          
        ) : (
          <form className='form' onSubmit={onSubmit}>
            {error && <p className='error'>{error}p>}
            <p>Please Login!p>
            <input
              type='text'
              placeholder='username'
              value={username}
              onChange={(e) =>
                dispatch({
                  type: 'field',
                  fieldName: 'username',
                  payload: e.currentTarget.value,
                })
              }
            />
            <input
              type='password'
              placeholder='password'
              autoComplete='new-password'
              value={password}
              onChange={(e) =>
                dispatch({
                  type: 'field',
                  fieldName: 'password',
                  payload: e.currentTarget.value,
                })
              }
            />
            <button className='submit' type='submit' disabled={isLoading}>
              {isLoading ? 'Logging in...' : 'Log In'}
            button>
          form>
        )}
      div>