Redux Saga 动作使应用程序崩溃

Question

我有一个简单的 React / Redux / Redux Sagas 应用程序，它使用 API 在单击按钮时随机显示狗的图片。

dogSagas.js

import { put, call, takeEvery, all } from 'redux-saga/effects';
import * as types from '../actions/types';
import * as actions from '../actions/dogActions';
import { DOG_API } from '../constants/variables';

function* getDogAsync() {
  try {
    yield put(actions.getDog);

    const data = yield call(() =>
      fetch(DOG_API)
        .then(res => res.json())
        .catch(err => console.error(err)),
    );

    yield put(actions.getDogOk(data));
  } catch (error) {
    yield put(actions.getDogFail());
  }
}

function* watchGetDog() {
  yield takeEvery(types.GET_DOG, getDogAsync);
}

export default function* rootSaga() {
  yield all([watchGetDog()]);
}

dogActions.js

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

export const getDog = () => ({
  type: types.GET_DOG,
});

export const getDogOk = data => ({
  type: types.GET_DOG_OK,
  payload: data.message,
});

export const getDogFail = () => ({
  type: types.GET_DOG_FAIL,
});

错误

但是，我有两个不同的错误。

1.) 当我执行 yield put(actions.getDog); 时，应用程序可以运行，但在控制台中出现错误：

uncaught at getDogAsync Error: Actions must be plain objects. Use custom middleware for async actions.

2.) 如果我这样做：yield put(actions.getDog()); 应用程序消耗大量 CPU 并有效崩溃。

问题

那么，我的问题是：

1.) 为什么这种方法会导致 Redux 抱怨非普通对象？

2.) 为什么这个看似无伤大雅的语句会导致应用程序崩溃？

完整代码

StackBlitz 上的完整代码 here。

Answer 1

问题是我在异步生成器 getDogAsync() 中调用 getDog() 动作创建器。由于我们有一个观察者，这导致了对 getDog() 的无限次调用。

因此，要修复，只需删除：

yield put(actions.getDog);

在 getDogAsync() 内。

Redux Saga 动作使应用程序崩溃

Redux Saga action crashes app

reactjs

redux

redux-saga

dogSagas.js

dogActions.js

错误

问题

完整代码