useReducer：React Hooks

react 中的 usereducer：通过两个迷你项目简化状态管理

介绍

状态管理是在 react 中构建动态和交互式应用程序的关键部分。虽然 usestate 足以管理简单状态，但随着应用程序的状态变得越来越复杂，usereducer 提供了一种更强大、可预测的方法来处理它。受 redux 的减速器模式的启发，usereducer 允许您定义状态转换应如何发生以响应特定操作，使其成为具有多个复杂状态更新的场景的理想选择。

在本文中，我们将：

详细解释 usereducer、其语法以及何时使用它。实施两个小项目：具有多个操作的计数器：超越基本增量/减量的示例，展示 usereducer 如何处理多个操作类型。具有复杂状态转换的待办事项列表：一款突出 usereducer 管理复杂状态对象能力的待办事项应用。

让我们深入了解 usereducer 如何简化 react 中的状态管理！

理解 usereducer

什么是 usereducer？

usereducer 是一个 react hook，专为 usestate 不足的情况而设计。您不是直接更新状态，而是指定一个根据当前状态和操作计算下一个状态的减速器函数。这种声明式方法使状态转换保持可预测，并允许您以集中的方式管理更复杂的状态逻辑。

usereducer 的语法

以下是语法细分：

const [state, dispatch] = usereducer(reducer, initialstate);

登录后复制

reducer：定义如何根据操作更新状态的函数。它需要两个参数：

state：当前状态。action：包含有关操作信息的对象，通常包括类型和可选的有效负载。

initialstate：状态的起始值。

示例：使用 usereducer 的基本计数器

让我们使用 usereducer 创建一个简单的计数器来查看实际语法。

import react, { usereducer } from 'react';function reducer(state, action) {    switch (action.type) {        case 'increment':            return { count: state.count + 1 };        case 'decrement':            return { count: state.count - 1 };        default:            return state;    }}function counter() {    const [state, dispatch] = usereducer(reducer, { count: 0 });    return (        
            
count: {state.count}
             dispatch({ type: 'increment' })}>increment             dispatch({ type: 'decrement' })}>decrement        
    );}export default counter;

登录后复制

守则解释

reducer 函数：该函数定义如何处理动作。根据操作类型（递增或递减），reducer 函数返回一个新的状态对象。调度操作：调度将一个操作发送到reducer，reducer对其进行处理并相应地更新状态。

何时使用 usereducer

usereducer 在以下情况下特别有用：

状态逻辑复杂或涉及多个子值。下一个状态取决于前一个状态。多个组件需要访问reducer管理的状态（可以将usereducer和usecontext结合起来使用全局状态）。

迷你项目1：多个动作的计数器

在这个项目中，我们将创建一个增强的计数器，允许多种操作（递增、递减、重置），以了解 usereducer 如何处理更广泛的操作。

步骤一：定义reducer函数

import react, { usereducer } from 'react';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: 0 };        default:            throw new error(`unknown action: ${action.type}`);    }}

登录后复制

第2步：创建计数器组件

function enhancedcounter() {    const [state, dispatch] = usereducer(reducer, { count: 0 });    return (        
            
count: {state.count}
             dispatch({ type: 'increment' })}>increment             dispatch({ type: 'decrement' })}>decrement             dispatch({ type: 'reset' })}>reset        
    );}export default enhancedcounter;

登录后复制

除了递增和递减之外，此增强型计数器现在还支持重置功能。该项目展示了 usereducer 在管理状态更新操作方面的灵活性。

迷你项目 2：构建具有复杂状态转换的待办事项列表

待办事项列表应用程序强调了 usereducer 如何非常适合管理具有多个转换的复杂状态对象，例如添加、删除和切换任务。

步骤一：定义reducer

function todoreducer(state, action) {    switch (action.type) {        case 'add':            return [...state, { id: date.now(), text: action.payload, completed: false }];        case 'remove':            return state.filter(todo => todo.id !== action.payload);        case 'toggle':            return state.map(todo =>                todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo            );        default:            throw new error(`unknown action type: ${action.type}`);    }}

登录后复制

第 2 步：创建待办事项列表组件

import React, { useReducer, useState } from 'react';function ToDoList() {    const [todos, dispatch] = useReducer(todoReducer, []);    const [task, setTask] = useState('');    const handleAdd = () => {        if (task.trim()) {            dispatch({ type: 'add', payload: task });            setTask(''); // Clear input field        }    };    return (        
            
To-Do List
             setTask(e.target.value)}                placeholder="Enter a new task"            />            Add Task            
                {todos.map(todo => (                    
                        {todo.text}                         dispatch({ type: 'toggle', payload: todo.id })}>                            {todo.completed ? 'Undo' : 'Complete'}                                                 dispatch({ type: 'remove', payload: todo.id })}>Delete                    
                ))}            
        
    );}export default ToDoList;

登录后复制

待办事项列表代码说明

行动：

添加：将新任务添加到列表中，并使用唯一 id 并将已完成状态设置为 false。删除：根据id过滤掉任务来删除它。切换：通过切换已完成状态将任务标记为已完成或未完成。

将 usereducer 与动态数据结合使用：此示例展示了 usereducer 如何处理对象数组中复杂的嵌套状态更新，使其非常适合管理具有多个属性的项目。

结论

在本文中，您学习了如何有效地使用 usereducer 在 react 应用程序中进行更复杂的状态管理。通过我们的项目：

增强型计数器演示了 usereducer 如何简化多个基于操作的状态更新。待办事项列表说明了如何使用 usereducer 管理复杂的状态对象，例如任务数组。

使用 usereducer，您可以为需要强大状态管理的应用程序编写更干净、更可预测且可维护的代码。尝试这些项目，下次在 react 应用程序中遇到复杂的状态逻辑时，请考虑使用reducer！

以上就是useReducer：React Hooks的详细内容，更多请关注【创想鸟】其它相关文章！