ReactJS - 使用 useReducer

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，探索React钩子的世界，特别是强大的useReducer钩子。如果你是编程新手，不用担心——我会一步步引导你，就像我在多年的教学中对无数学生所做的那样。让我们开始吧！

useReducer是什么？

在我们深入细节之前，先来了解一下useReducer。想象你在玩一个视频游戏，你的角色有不同的状态——生命值、力量和速度。当你玩游戏时，这些状态会根据你的行为而改变。useReducer就像游戏引擎，根据特定的规则管理这些状态的改变。

在React术语中，useReducer是一个帮助我们管理应用程序中复杂状态逻辑的钩子。当你的状态中有多个子值，或者下一个状态依赖于前一个状态时，它特别有用。

useReducer钩子的签名

现在，让我们看看如何在代码中实际使用useReducer。以下是其基本结构：

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

让我们分解一下：

• state：这是我们的当前状态，就像游戏类比中角色的当前生命值。
• dispatch：这是一个函数，我们用它来发送更新状态的行动。
• reducer：这是一个函数，指定了我们的状态如何响应行动而改变。
• initialState：这是我们应用程序的起始状态。

现在可能看起来有点令人困惑，但别担心！我们很快就会看到它在实际中的运用，到时候一切都会变得清晰。

应用reducer钩子

让我们创建一个简单的计数器应用程序来理解useReducer是如何工作的。我们将从基本的设置开始，然后在此基础上构建。

import React, { useReducer } from 'react';

// 步骤1：定义初始状态
const initialState = { count: 0 };

// 步骤2：创建reducer函数
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}

// 步骤3：创建Counter组件
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
计数：{state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}

export default Counter;

让我们一步步分解：

1. 我们从React中导入useReducer。
2. 我们定义了我们的initialState，计数为0。
3. 我们创建了一个reducer函数，它接受当前的state和一个action，并返回基于行动类型的新状态。
4. 在我们的Counter组件中，我们使用useReducer来获取当前的state和dispatch函数。
5. 我们渲染当前的计数和两个按钮，点击时会分别发送'increment'和'decrement'行动。

当你点击'+'按钮时，它会发送一个'increment'行动，我们的reducer通过增加计数来处理它。'-'按钮的工作原理类似，用于减少计数。

使用useReducer

现在我们已经看到了一个基本示例，让我们探索一个更复杂的情况。想象我们正在构建一个简单的任务管理应用程序。我们将使用useReducer来处理添加和删除任务。

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

// 步骤1：定义初始状态
const initialState = { tasks: [] };

// 步骤2：创建reducer函数
function reducer(state, action) {
switch (action.type) {
case 'ADD_TASK':
return { tasks: [...state.tasks, action.payload] };
case 'REMOVE_TASK':
return { tasks: state.tasks.filter((task, index) => index !== action.payload) };
default:
return state;
}
}

// 步骤3：创建TaskManager组件
function TaskManager() {
const [state, dispatch] = useReducer(reducer, initialState);
const [newTask, setNewTask] = useState('');

const handleAddTask = () => {
if (newTask.trim()) {
dispatch({ type: 'ADD_TASK', payload: newTask });
setNewTask('');
}
};

const handleRemoveTask = (index) => {
dispatch({ type: 'REMOVE_TASK', payload: index });
};

return (
<div>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={handleAddTask}>添加任务</button>
<ul>
{state.tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleRemoveTask(index)}>移除</button>
</li>
))}
</ul>
</div>
);
}

export default TaskManager;

在这个更复杂的例子中：

1. 我们的initialState现在有一个任务数组。
2. reducer函数处理两种类型的行动：'ADD_TASK'和'REMOVE_TASK'。
3. 在TaskManager组件中，我们同时使用useReducer来管理任务和useState来处理输入字段。
4. 我们有函数来处理添加和删除任务，它们会发送相应的行动。
5. 我们渲染了一个输入字段用于新任务，一个按钮用于添加任务，以及一个任务列表，每个任务旁边都有一个移除按钮。

这个例子展示了useReducer如何能够以清晰和有组织的方式帮助管理更复杂的状态逻辑。

方法表格

以下是我们所涵盖的关键方法和概念的总结表格：

方法/概念	描述	示例
useReducer	一个用于管理复杂状态逻辑的React钩子	const [state, dispatch] = useReducer(reducer, initialState);
reducer	一个指定状态如何响应行动而改变的函数	function reducer(state, action) { ... }
dispatch	用于发送更新状态行动的函数	dispatch({ type: 'ADD_TASK', payload: newTask })
action	描述应如何改变状态的行动对象	{ type: 'INCREMENT' }
initialState	应用程序的起始状态	const initialState = { count: 0 };

记住，有效地学习使用useReducer需要练习。如果它立刻没有让你明白——别气馁——即使是经验丰富的开发者有时也需要时间来理解新概念。继续编码，继续尝试，最重要的是，享受乐趣！在你意识到之前，你将能够像专业人士一样管理复杂的状态。快乐编码！

Credits: Image by storyset