能否在Redux Action中使用i18n国际化？调用useTranslation报错如何解决

你遇到的报错是 React Hook 的调用规则限制导致的：useTranslation 作为 React Hook，只能在 React 函数组件、自定义 React Hook 的顶层作用域调用，你定义的 sendDataRequest 是普通 Redux 异步 action creator，不属于上述两类合法调用场景，因此触发报错。即使将 Hook 移入返回的 thunk 函数内部也不符合规则，thunk 本质仍是普通业务函数，不满足 Hook 的调用要求。

完全可以在 Redux Action 中使用 i18n 能力，推荐两种落地方式：

方案1：直接调用全局 i18n 实例（推荐） #

react-i18next 基于原生 i18next 封装，你可以直接导入项目中初始化完成的全局 i18n 实例调用翻译能力，不需要依赖 Hook，改动量极小：

// 导入项目中你自己初始化i18n的实例，一般在i18n.js/ts配置文件中导出
import i18n from '@/i18n'; 

export const sendDataRequest = (requestId) => {
  return async (dispatch) => {
    try {
      dispatch(sendDataRequest());
      await dataAPI.sendDataRequest({ requestId });
      notification.success({
        message: i18n.t('infoPage.requestSentSuccessfully'),      
     });
      dispatch(sendDataSuccess());
    } catch (error) {
      dispatch(sendDataFailure());
      console.error(error);
    }
  }
}

方案2：组件侧提前翻译传递结果 #

如果你的项目需要严格分层，不想让 action 层依赖 i18n 能力，可以在调用 action 的组件内先完成翻译，将翻译后的文本作为参数传入 action：

组件侧代码 #

import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { sendDataRequest } from '@/store/actions';

const YourBusinessComponent = () => {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const handleSubmit = (requestId) => {
    // 提前翻译需要的提示文本
    const successTip = t('infoPage.requestSentSuccessfully');
    dispatch(sendDataRequest(requestId, successTip));
  }

  // 其余组件逻辑
}

改造后的Action代码 #

export const sendDataRequest = (requestId, successMsg) => {
  return async (dispatch) => {
    try {
      dispatch(sendDataRequest());
      await dataAPI.sendDataRequest({ requestId });
      notification.success({
        message: successMsg,      
     });
      dispatch(sendDataSuccess());
    } catch (error) {
      dispatch(sendDataFailure());
      console.error(error);
    }
  }
}

• 方案1不需要修改调用侧代码，适配成本极低，适合绝大多数常规业务项目
• 方案2实现了action层和i18n能力的解耦，适合对代码分层要求严格的大型工程

内容的提问来源于stack exchange，提问作者Vlad