React-Redux封装公共dispatch函数调用useDispatch报无效Hook错误

useDispatch、useSelector属于React Hook，必须严格遵守Hook调用规则：只能在React函数组件顶层、或者自定义Hook顶层调用，不能在普通工具函数、条件分支、循环、嵌套回调里调用。
你当前把Hook直接写在普通导出函数setPreviewData内部，不管在哪里调用这个普通函数，都会触发无效Hook调用报错。
另外你现有reducer逻辑有隐患：处理UPDATE_PREVIEW_DATA时直接return action.data，会把整个previewData状态全量替换为传入的对象，其他未更新的字段（其他模块、其他语言的配置）会被直接覆盖丢失，不符合局部更新表单字段的需求。

你要的多组件复用更新逻辑的需求，有两种符合规范的实现方式，都可以接近你预期的调用体验。

方案1：封装自定义Hook（推荐） #

自定义Hook要求函数名以use开头，内部可以合法调用Redux Hook，返回绑定好dispatch的更新方法，只需要在组件顶层调用一次拿到方法，就可以在事件回调里传参使用。

1. 编写公共自定义Hook：

// src/hooks/useSetPreviewData.js
import { useDispatch } from "react-redux";
import { UPDATE_PREVIEW_DATA } from "../../redux/types";

// 命名以use开头，符合Hook识别规则
export default function useSetPreviewData() {
  const dispatch = useDispatch();

  return (event, obj, lang) => {
    // 提前从事件对象取值，避免React事件池复用导致取值异常
    const { name, value } = event.target;
    dispatch({
      type: UPDATE_PREVIEW_DATA,
      payload: { obj, lang, name, value }
    })
  }
}

2. 修正reducer，做不可变局部更新，避免覆盖其他状态：

// src/redux/reducers/previewData.js
import { UPDATE_PREVIEW_DATA } from "../types";

const initialState = {
  // 保留你原来的初始状态配置
};

const previewDataReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_PREVIEW_DATA: {
      const { obj, lang, name, value } = action.payload;
      // 逐层浅拷贝，只更新目标字段，不影响其他状态
      return {
        ...state,
        [obj]: {
          ...state[obj],
          [lang]: {
            ...state[obj]?.[lang],
            [name]: value
          }
        }
      }
    }
    default:
      return state;
  }
};
export default previewDataReducer;

3. 组件中使用：

// 你的业务组件
import useSetPreviewData from '../../hooks/useSetPreviewData';

function BusinessComponent() {
  // 仅在组件顶层调用一次Hook拿到方法
  const setPreviewData = useSetPreviewData();

  const handleChange = (e) => {
    // 事件回调里直接按你预期的方式传参调用即可
    setPreviewData(e, "hightlights", "en");
  }

  return <input name="title" onChange={handleChange} />
}

方案2：封装Thunk Action #

如果你不想用自定义Hook，可以基于Redux Thunk写普通的action创建函数，不需要在函数内部调用Hook，通过thunk自带的getState拿最新store状态即可。

1. 编写thunk action：

// src/redux/actions/previewData.js
import { UPDATE_PREVIEW_DATA } from "../types";

export const setPreviewData = (event, obj, lang) => (dispatch, getState) => {
  const { name, value } = event.target;
  // 通过thunk提供的getState拿最新状态，不需要useSelector
  const { previewData } = getState();
  dispatch({
    type: UPDATE_PREVIEW_DATA,
    data: {
      ...previewData,
      [obj]: {
        ...previewData[obj],
        [lang]: {
          ...previewData[obj][lang],
          [name]: value
        }
      }
    }
  })
}

2. 组件中使用：

import { useDispatch } from "react-redux";
import { setPreviewData } from '../../redux/actions/previewData';

function BusinessComponent() {
  const dispatch = useDispatch();

  const handleChange = (e) => {
    dispatch(setPreviewData(e, "hightlights", "en"));
  }

  return <input name="title" onChange={handleChange} />
}

注意：你之前期望的「不在组件内做任何Hook调用，直接导入函数就在任意位置执行」的写法不符合Redux单向数据流规则，Redux的dispatch方法必须从React上下文中获取，不能在脱离组件上下文的普通函数里隐式调用。以上两种方案都只需要在组件顶层做一次初始化，后续调用成本和你预期的写法基本一致。

内容的提问来源于stack exchange，提问作者Kaung Khant Zaw