通过 redux-saga 调度操作时，React 应用程序冻结答案

【问题标题】：React app freezes when dispatching an action through redux-saga通过 redux-saga 调度操作时，React 应用程序冻结
【发布时间】：2021-06-05 08:11:17
【问题描述】：

我试图掌握 react 和 redux-saga，我面临的问题是，每当我尝试在功能组件的 useEffect 挂钩中调度任何状态更改操作时，例如，使用 useDispatch 挂钩，应用程序冻结。现在 useSelector 工作得很好，我可以得到状态。

我尝试阅读 redux-saga 文档中关于应用冻结的故障排除部分，其中说您必须让步，但我已经这样做了：

import { put } from 'redux-saga/effects';

import * as actions from '../actions/index';

export function* globalLoadingSaga(action) {
  yield put(actions.setGlobalLoading());
}

我也试过去掉括号，即离开：

export function* globalLoadingSaga(action) {
  yield put(actions.setGlobalLoading);
}

它似乎可以工作，但我收到一个错误：“错误：操作必须是普通对象。使用自定义中间件进行异步操作。”而且，动作是普通对象：

export const setGlobalLoading = (loading) => {
  return {
    type: actionTypes.SET_GLOBAL_LOADING,
    loading: loading,
  };
};

所以这对我来说似乎不对。

我也尝试使用“fork”而不是“put”，但它又给了我另一个错误“错误：fork：{context, fn} 类型的参数未定义或为空fn”，并且，再一次，这对我来说感觉不对。

我试过用谷歌搜索它，但找不到与这个问题有点相似的任何东西，我现在迷路了。

最奇怪的是，我肯定知道，这样的实现以前是完美无缺的。我是从几个月前在在线课程之后创建的一个项目中获得的。那时一切都很好。出于好奇，我确实尝试打开该项目，看看它是否有同样的问题，而且，不知何故，该应用程序也冻结了。从那以后我没有改变任何东西，甚至没有触摸它，没有更新任何依赖项，什么也没有，但应用程序仍然挂起。

这是一个代码框 sn-p 被剥离到最低限度，它也可能由于某种循环而冻结：https://codesandbox.io/s/jovial-kowalevski-dotvp?file=/src/index.js

【问题讨论】：

标签： reactjs redux react-redux redux-saga

【解决方案1】：

您遇到了调度SET_GLOBAL_LOADING动作类型的无限循环。

// App.js
const onSetGlobalLoading = useCallback(
  (boolean) => {
    dispatch(actions.setGlobalLoading(boolean)); // <-- Dispatches action type of 'SET_GLOBAL_LOADING'
  },
  [dispatch]
);

由于您从 App.js 中调度了 SET_GLOBAL_LOADING 的动作类型，那么您就有了一个监听 SET_GLOBAL_LOADING 动作类型的 saga。但是在那个传奇中，你也发送了一个SET_GLOBAL_LOADING，这就是它执行无限循环的原因。

export function* globalLoadingSaga(action) {
  yield put(actions.setGlobalLoading()); // <-- Dispatches action type of 'SET_GLOBAL_LOADING', which is the reason your app freeze
}

所以答案可能是，您可能会在您的 saga 上发送不同的操作。

【讨论】：