如何在Redux Saga 中使用React Hook？

xyhw6mcr 于 2023-10-23 发布在 React

关注(0)|答案(3)|浏览(154)

My solution
我正在为应用程序设置语言。但我有个问题。
我使用React.useContext()来设置语言。但当我在 Saga 的吐司中修复它时，它会记录：
[错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
1.你可能有不匹配的React版本和渲染器（比如React DOM）
1.你可能违反了钩的规则
1.您可能在同一个应用程序中有多个React副本，请参阅https://reactjs.org/link/invalid-hook-call了解有关如何调试和修复此问题的提示。
所以我能在 Saga 里用吗？如果是，我应该如何**使用它？如果没有，你能给我一个建议吗？
最后的解决方案是 prop 消息从 Saga 。
这是我的'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();
  }
}

react-native

来源：https://stackoverflow.com/questions/70377185/how-to-use-react-hook-in-redux-saga

3条答案

按热度按时间

eivgtgni1#

我的解决方案是

export function toastLoginSuccess() {
  AsyncStorage.getItem('language').then(value => {
    switch (value) {
      case 'en':
        return ToastAndroid.show(
          English.toastLoginSuccess,
          ToastAndroid.SHORT,
          ToastAndroid.TOP,
        );

      default:
        return ToastAndroid.show(
          Vietnamese.toastLoginSuccess,
          ToastAndroid.SHORT,
          ToastAndroid.TOP,
        );
    }
  });
}

当我改变存储上下文时，我将在AsyncStorage上保存语言状态。

赞(0）回复(0）举报 2023-10-23

xvw2m8pv2#

你需要先在 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

赞(0）回复(0）举报 2023-10-23

b1zrtrql3#

如果你想在React Saga generator函数中使用React Hook（不仅仅是这个例子），你必须在 Saga *generator函数 * 之外创建一个函数来运行你的钩子，然后在 Saga *generator函数 * 内部调用这个函数。
例如

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();
  }
}

赞(0）回复(0）举报 2023-10-23

我来回答

如何在Redux Saga 中使用React Hook？

3条答案

相关问题

热门标签

最新问答