React.js开发中如何在函数外部使用reducer内定义的变量

DevOps 小满

2026-9-28

核心问题原因

reducer 内部定义的 testing 是函数作用域的局部变量，默认情况下函数执行完成后变量就会被回收，外部无法直接访问，你当前直接给全局变量赋值的写法会抛出变量未定义的错误。

解决方案

方案1：将变量值挂载到外部作用域（仅适合临时调试，不推荐生产使用，违反 reducer 纯函数原则）

const initialState = {count: 0};
// 外部提前定义变量用于接收值
let externalTesting;

function reducer(state, action) {
    let testing = state.count;
    // 执行时赋值给外部变量
    externalTesting = testing;
    switch (action.type) {
      case 'increment':
        return {count: state.count + 1};
      case 'decrement':
        return {count: state.count - 1};
      default:
        throw new Error();
    }
  }

// 注意：必须在 reducer 至少执行过一次之后再取值，否则值为 undefined
const global = externalTesting;

方案2：React 项目中直接从 useReducer 返回的 state 取值（推荐）
你代码中定义的 testing 本身就是 state.count，在使用 reducer 的组件中可以直接拿到最新的 state，取值和 reducer 内部的 testing 完全一致，符合 React 数据流规范，没有副作用风险。

import { useReducer } from 'react';

const initialState = {count: 0};
function reducer(state, action) {
    let testing = state.count;
    switch (action.type) {
      case 'increment':
        return {count: state.count + 1};
      case 'decrement':
        return {count: state.count - 1};
      default:
        throw new Error();
    }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  // 直接从state取值，和reducer内部的testing完全一致
  const testing = state.count;
  // 后续组件逻辑
}