如何在 Redux Saga 中使用 React Hook？

Question

我正在为我的应用程序设置语言。但我有一个问题。

我使用

React.useContext()

来设置语言。但是当我在 saga 的 toast 中修复它时，它会记录：

[错误：无效的挂钩调用。钩子只能在主体内部调用 的一个功能组件。以下情况之一可能会发生这种情况 理由：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本 请参阅 https://reactjs.org/link/invalid-hook-call 了解有关如何调试的提示 并解决这个问题。]

那么我可以在saga中使用吗？如果是，如何我应该使用它？如果否，你能给我建议一个解决方案吗？

---

最终解决方案是来自 saga 的 props 消息。

---

这是我的“toast.js”文件的函数：

export function toastLoginSuccess() {
  ToastAndroid.show(
    LANGUAGES.toastLoginSuccess,
    ToastAndroid.SHORT,
    ToastAndroid.TOP,
  );
}

语言是

import * as LANGUAGES from '../asset/language';

和

toastLoginSuccess

是

export const toastLoginSuccess = 'Login success!';

我想改成

const LANGUAGES = React.useContext(LanguageContext).language;

saga 是一个类似于以下内容的文件：

export function* fetchSigninSaga(action) {
  try {
    // ...
    yield Toast.toastLoginSuccess())
  } catch (error) {
    // ...
    yield Toast.toastLoginFail();
  }
}

Answer 1

你需要先在saga中注入你的上下文，下面是实现它的方法，

import createSagaMiddleware from "redux-saga";

const userService = createUserService(...);

const sagaMiddleware = createSagaMiddleware({
    context: LanguageContext
});

sagaMiddleware.run(rootSaga);

注射后，您可以按以下方式使用它，

import { getContext } from "redux-saga/effects";

export function* loadUsersSagas(action) {
    const languageContext = yield getContext("languageContext");
    const language = yield languageContext.getLanguage();
    ...
}

有关更多信息，您可以查看，getContext

Answer 2

如果您想在React Saga生成器函数中使用React Hook（不仅仅是这个示例），您将必须创建一个函数来在saga之外运行您的钩子生成器函数，然后在saga内部调用该函数生成器函数.

示例

const success = ()=> { 
   // your hook or any other hook 
   Toast.toastLoginSuccess()
}
const failed = ()=> { 
   // your hook or any other hook
   Toast.toastLoginFail()
}

然后您可以调用您的函数

export function* fetchSigninSaga(action) {
  try {
    // ...
    yield success()
  } catch (error) {
    // ...
    yield failed();
  }
}