是否可以将 i18n 本地化用于 redux 操作？答案

【问题标题】：Is it possible to use i18n localization for redux Actions?是否可以将 i18n 本地化用于 redux 操作？
【发布时间】：2021-11-04 12:00:54
【问题描述】：

我试图为 Redux Action 函数实现 i18n 本地化，但我不断收到不同的钩子错误。当我以这种方式实现 i18n 时，我收到错误。

第 428:17 行：React Hook“useTranslation”在函数“sendDataRequest”中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数。

import { useTranslation } from "react-i18next";

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

然后我将 const { t } = useTranslation(); 移到 return 语句中。但后来我收到另一个错误看起来我显然在这里用错了。但我找不到任何关于 i18n 在 Actions 中使用的示例。有谁知道是否可以在 Actions 中使用 i18b？

【问题讨论】：

你必须在反应函数组件中使用反应钩子。这是规则。你需要重构你的代码。为什么不创建一个内部使用useTranslation钩子的自定义钩子，并在数据请求完成后调用notification.success()方法？

标签： reactjs redux internationalization i18next react-i18next

【解决方案1】：

查看https://github.com/i18next/react-i18next/issues/909

您需要访问您的i18next 实例。您在代码库中某处创建的那个。有了这个实例，您可以简单地调用i18n.t("my.translation.key") 进行翻译。这完全独立于 react。

【讨论】：