【useReducer Hook】集中式管理组件复杂状态

引言

在 React 中，useState 是一个常用的 Hook，用于管理组件的状态。然而，当状态逻辑变得复杂时，useState 可能会导致代码难以维护。useReducer 是另一个用于管理状态的 Hook，特别适用于状态逻辑较为复杂的情况。本文将通过一个具体的例子——实现一个计数器应用，来详细介绍如何使用 useReducer。

语法

const [state,dispatch] = useReducer(reducer, initialArg, init?)

参数：

1. reducer： 用于更新 state 的纯函数。参数为 state 和 action，返回值是更新后的 state。state 与 action 可以是任意合法值。
2. iniialArg: 用于初始化 state 的任意值。初始值的计算逻辑取决于接下来的 init 参数。
3. init： 用于计算初始值的函数。如果存在，使用 init(initialArg) 的执行结果作为初始值，否则使用 initialArg。

项目结构

我们的项目结构如下：

src/
├── App.tsx
└── components/
    └── useReducer/
        ├── Counter.tsx
        └── CounterReducer.ts

定义 Reducer

首先，我们需要定义一个 Reducer 函数，用于处理不同的动作（actions）并返回新的状态。

CounterReducer.ts

// src/components/useReducer/CounterReducer.ts
import { ActionType, StateType } from './types'
export const reducer = (state: StateType, action: ActionType) => {
  switch (action.type) {
    case 'decrement':
      return { ...state, count: state.count - 1 }
    case 'increment':
      return { ...state, count: state.count + 1 }
    case 'reset':
      return { ...state, count: 0 }
    default:
      throw new Error(`Unhandled action type`);
  }
}

export const initialState: StateType = {
  count: 1
}

在这个文件中，我们定义了 initialState 和 counterReducer 函数。counterReducer 根据不同的 action.type 返回新的状态。

定义类型

为了确保类型安全，我们可以定义 State 和 Action 的类型。

types.ts

// src/components/useReducer/types.ts
export interface State {
  count: number;
}

export type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' };

使用 useReducer 管理状态

接下来，在 Counter.tsx 中使用 useReducer 来管理计数器的状态。

Counter.tsx

// src/components/useReducer/Counter.tsx
import { useReducer } from 'react'
import { reducer, initialState } from './CounterReducer'
import { StateType } from './types'

/**
 * 初始化函数 可选
 * @param initialState useReducer传递的第二个参数
 * @returns state的初始值 
 */
const init = (initialState: StateType) => {
  console.log("🚀 ~ init ~ initialState:", initialState)
  return {
    ...initialState,
    count: initialState.count + 100
  }
}
export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState, init);
  console.log("🚀 ~ Counter ~ state:", state)
  return (
    <div>
      <p>计数器： {state.count}</p>
      <button onClick={() => dispatch({ type: 'decrement' })}>计数器减1</button>
      <button onClick={() => dispatch({ type: 'increment' })}>计数器加1</button>
      <button onClick={() => dispatch({ type: 'reset' })}>重置计数器</button>
    </div>
  )
}

在这个文件中，我们使用 useReducer 来管理计数器的状态。useReducer 返回当前的状态 state 和一个分发动作的方法 dispatch。通过点击按钮，我们可以分发不同的动作来更新状态。

应用入口

最后，在 App.tsx 中引入 Counter 组件，作为应用的入口。

App.tsx

// src/App.tsx
import Counter from './components/useReducer/Counter'

function App() {
  return <Counter />
}

export default App;

解释与总结

useReducer 的作用

• 管理复杂状态：useReducer 适用于状态逻辑较为复杂的情况，特别是当状态依赖于之前的多个状态时。

• 分离逻辑：通过将状态逻辑提取到一个单独的 Reducer 函数中，可以使代码更加模块化和易于维护。

示例中的具体实现

• CounterReducer.ts：我们定义了一个 Reducer 函数 counterReducer，用于处理不同的动作并返回新的状态。

• types.ts：我们定义了 State 和 Action 的类型，以确保类型安全。

• Counter.tsx：我们使用 useReducer 来管理计数器的状态，并通过点击按钮分发不同的动作来更新状态。

注意事项

• 初始化状态：useReducer 的第二个参数是初始状态。如果需要根据 props 动态初始化状态，可以使用第三个参数 init。

• 调试：由于 useReducer 的状态更新是基于动作的，调试时可以通过查看动作来追踪状态的变化。

希望这篇文章能帮助你更好地理解useReducer的使用方法，并为你的 React 项目带来更多的灵感和便利。如果你有任何问题或建议，欢迎留言交流！