Redux Saga action вылетает приложение - PullRequest
Новая
       10

Redux Saga action вылетает приложение

0 голосов
/ 21 мая 2018

У меня есть простое приложение 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,
});

error

Однако у меня есть две разные ошибки.

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()); приложениепотребляет много ресурсов процессора и эффективно вылетает.

Вопросы

Итак, мои вопросы:

1.) Почему этот подход заставляет Redux жаловаться на непрозрачные объекты?

2.) Почему это, казалось бы, безобидное утверждение приводит к сбою приложения?

полный код

полный код на StackBlitz здесь .

1 Ответ

0 голосов
/ 21 мая 2018

Проблема заключалась в том, что я вызывал getDog() создатель действий в асинхронном генераторе getDogAsync().Так как у нас был наблюдатель, это привело к бесконечному количеству звонков на getDog().

Итак, чтобы исправить, просто удалите: 

yield put(actions.getDog);

в пределах getDogAsync().

...