useReducer 还是 Redux Reducer？如何判断你需要哪一个

Source: Dev.to

🎯 核心概念：Reducer 是什么？

useReducer 和 Redux reducer 都基于相同的概念：reducer 只是一个函数，它：

• 接收当前状态和一个 action
• 返回下一个状态

在普通的 JavaScript 中，它看起来是这样的：

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

没有副作用。没有变异。仅仅是一个纯函数。

🪝 useReducer in React

useReducer 是一个用于在单个组件（或通过 props 或 context 在少量组件之间）管理状态的 React Hook。

示例

import React, { useReducer } from 'react';

function Counter() {
  const initialState = { count: 0 };

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

  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      
Count: {state.count}

       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

关于 useReducer 的关键点

• 状态是局部于组件的（除非你手动通过 context 共享）
• 没有中间件、没有开发工具、没有全局 store
• 非常适合处理复杂的本地状态更新

🏪 Redux Reducer

在 Redux 中，reducer 的工作方式相同——但它不是更新局部状态，而是更新一个全局 store，整个应用的任何位置都可以访问该 store。

Reducer 定义

// reducer.js
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
export default counterReducer;

Store 创建

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

组件使用

// Component.jsx
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <>
      
Count: {count}

       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

关于 Redux Reducer 的关键点

• 状态是全局的
• 支持强大的中间件（如 Redux Thunk、Redux Saga）
• 与开发者工具集成，便于调试
• 通常用于大型、复杂的应用

🔍 它们的相同之处

它们都基于函数式编程中的相同 reducer 概念构建。

🔀 它们的区别

💡 应该使用哪一个？

在以下情况下使用 useReducer

• 状态比较复杂，但仅与单个组件或小子树相关。
• 你不需要全局状态共享。
• 你想避免为小功能引入 Redux。

在以下情况下使用 Redux reducer

• 你需要全局状态管理。
• 你想要高级调试、时间旅行以及中间件。
• 你的应用足够大，值得进行额外的设置。

🏁 最终要点

useReducer 和 Redux reducers 就像自行车和公交车——它们都能把你从状态 A 带到状态 B，但一个适合短途、个人的出行（本地组件状态），而另一个适合运载整座城市（全局应用状态）。它们共享相同的函数式编程基因，却生存在不同的生态系统中。