Redux Saga Action引发应用崩溃及报错问题求助

咱们一个个来拆解你的问题，这俩都是刚上手Redux Saga时很容易踩的坑！

1. 为什么 yield put(actions.getDog); 会触发「Actions must be plain objects」报错？ #

首先得明确Redux的核心规则：所有被dispatch的Action必须是纯JavaScript对象，对象里至少要有type字段来标识动作类型。而actions.getDog是你的Action Creator——也就是一个用来生成Action对象的函数，并不是Action本身。

当你写yield put(actions.getDog)时，你把这个函数直接传给了Redux Saga的put方法，put会尝试把这个函数作为Action dispatch给Redux Store。但Redux看到传入的是函数而非纯对象，就会抛出那个错误：它不知道该怎么处理一个函数类型的Action（除非你用了专门处理异步Action的中间件，但这里问题出在你没执行Action Creator）。

简单说：你传的是「造Action的工具」，而不是「造好的Action」，Redux当然不认。

2. 为什么 yield put(actions.getDog()); 会导致CPU占用过高并崩溃？ #

这是典型的无限循环dispatch问题，咱们捋清楚逻辑链就懂了：

假设你的Saga代码大概是这样的：

// 监听getDog这个Action，触发getDogAsync任务
yield takeEvery(actions.getDog.type, getDogAsync);

function* getDogAsync() {
  // ... 调用API的代码
  yield put(actions.getDog()); // 这里又dispatch了一次getDog Action
}

当你点击按钮dispatch getDog后：

1. Saga监听到getDog Action，执行getDogAsync
2. getDogAsync里又调用put(actions.getDog())，再次dispatch getDog Action
3. Saga再次监听到这个Action，又执行getDogAsync
4. 重复步骤2-3，形成无限循环

每一次循环都会执行Saga的任务逻辑，不断消耗CPU资源，直到浏览器不堪重负崩溃。

正确的写法应该是什么样的？ #

解决核心是拆分Action类型，把「触发API请求」和「请求成功/失败」的Action分开：

1. 定义三类Action Creator #

// actions.js
export const fetchDogRequest = () => ({ type: 'FETCH_DOG_REQUEST' });
export const fetchDogSuccess = (imageUrl) => ({ 
  type: 'FETCH_DOG_SUCCESS', 
  payload: imageUrl 
});
export const fetchDogFailure = (error) => ({ 
  type: 'FETCH_DOG_FAILURE', 
  payload: error 
});

2. 编写Saga逻辑 #

// dogSagas.js
import { call, put, takeEvery } from 'redux-saga/effects';
import axios from 'axios';
import * as actions from './actions';

function* fetchDogAsync() {
  try {
    // 调用狗狗图片API
    const response = yield call(axios.get, 'https://dog.ceo/api/breeds/image/random');
    // 请求成功，dispatch成功Action更新State
    yield put(actions.fetchDogSuccess(response.data.message));
  } catch (error) {
    // 请求失败，dispatch失败Action处理错误
    yield put(actions.fetchDogFailure(error.message));
  }
}

// 只监听「请求触发」的Action
export function* watchFetchDog() {
  yield takeEvery('FETCH_DOG_REQUEST', fetchDogAsync);
}

3. 组件中触发请求 #

// 组件里的点击事件
const handleClick = () => {
  dispatch(actions.fetchDogRequest());
};

这样逻辑就闭环了：点击按钮触发请求Action → Saga执行API调用 → 根据结果dispatch成功/失败Action，不会再出现循环。

内容的提问来源于stack exchange，提问作者Colin Burke