useReducer：React Hooks-js教程-PHP中文网

useReducer：React Hooks

花韻仙語

发布： 2024-11-09 11:06:41

转载

1056人浏览过

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 (
        <div>
            <p>count: {state.count}</p>
            <button onclick={() => dispatch({ type: 'increment' })}>increment</button>
            <button onclick={() => dispatch({ type: 'decrement' })}>decrement</button>
        </div>
    );
}

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 (
        <div>
            <p>count: {state.count}</p>
            <button onclick={() => dispatch({ type: 'increment' })}>increment</button>
            <button onclick={() => dispatch({ type: 'decrement' })}>decrement</button>
            <button onclick={() => dispatch({ type: 'reset' })}>reset</button>
        </div>
    );
}

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 (
        <div>
            <h2>To-Do List</h2>
            <input
                value={task}
                onChange={e => setTask(e.target.value)}
                placeholder="Enter a new task"
            />
            <button onClick={handleAdd}>Add Task</button>

            <ul>
                {todos.map(todo => (
                    <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                        {todo.text}
                        <button onClick={() => dispatch({ type: 'toggle', payload: todo.id })}>
                            {todo.completed ? 'Undo' : 'Complete'}
                        </button>
                        <button onClick={() => dispatch({ type: 'remove', payload: todo.id })}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ToDoList;

登录后复制

待办事项列表代码说明

行动：
- 添加：将新任务添加到列表中，并使用唯一 id 并将已完成状态设置为 false。
- 删除：根据id过滤掉任务来删除它。
- 切换：通过切换已完成状态将任务标记为已完成或未完成。
将 usereducer 与动态数据结合使用：此示例展示了 usereducer 如何处理对象数组中复杂的嵌套状态更新，使其非常适合管理具有多个属性的项目。