云天游的博客

理解React中的Reducer

最近更新：2025-09-24 | 字数总计：533 | 阅读估时：2分钟 | 阅读量：次

示例代码
进阶使用
1. Reducer组合
使用Context API和useReducer实现全局状态管理

Reducer的定义：在React中，一个Reducer是一个函数，它接收当前状态和一个动作（action），然后返回一个新的状态。这个概念来源于函数式编程，特别是在Flux架构模式中的使用。

工作方式：Reducer函数通常用于管理应用的状态。在一个简单的购物车应用中，比如，Reducer可能会处理添加商品到购物车、移除商品或清空购物车的动作。

纯函数：Reducer必须是纯函数，意味着给定相同的输入，它总是返回相同的输出，并且不产生副作用。

使用场景：在React的上下文中，Reducer经常与useReducer钩子结合使用，为组件提供更复杂的状态逻辑管理，或者与Redux等状态管理库结合使用。

示例代码

下面是一个使用counterReducer的React组件示例：

import React, { useReducer } from 'react';

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

function counterReducer(state: number, action: Action): number {
    switch (action.type) {
        case 'increment':
            return state + 1;
        case 'decrement':
            return state - 1;
        default:
            return state;
    }
}

const CounterComponent = () => {
    const [count, dispatch] = useReducer(counterReducer, 0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
};

export default CounterComponent;

在这个组件中：

我们通过调用useReducer，将counterReducer和初始状态0传入。
useReducer返回一个状态（count）和一个dispatch函数。
当用户点击按钮时，我们使用dispatch函数发送一个increment或decrement动作到counterReducer。
counterReducer根据动作类型更新状态，并返回新的状态值。
更新的状态值（count）被用来在UI中展示。

进阶使用

Reducer组合

在大型应用中，你可能会有多个Reducer，每个Reducer管理应用状态的不同部分。Reducer组合（combineReducers）允许你将多个小的、独立管理状态片段的Reducer合并成一个主Reducer，这使得状态管理更加模块化和可维护。

使用Context API和useReducer实现全局状态管理

2023-12-03 该篇文章被 ling 打上标签: React tsx useReducer 归为分类: 前端开发

示例代码

进阶使用

Reducer组合

使用Context API和useReducer实现全局状态管理