Redux / React. Получение стека переполнения стека в Redux-Saga Middleware

Question

Я не могу понять, что не так с моим Redux Saga middleWare, потому что каждый раз, когда я пытаюсь запустить свою функцию Saga и отправить ее в компоненте MainComponent ниже - я получаю цикл stackoverflow на странице и все элементы становятся недоступными для утечки памяти.

Буду благодарен за любую справочную информацию!

=== My Redux Saga MiddleWare:

import { takeEvery } from 'redux-saga'; 
import addData from '../actions';

const createSaga = function* createSaga(dispatch) {
    try {
        yield takeEvery("ADD_DATA", (action) => {
            console.log(action); // getting a stackoverflow loop in this Saga function
            dispatch(action);
        });
    } catch (e) { 
        console.log(e) 
    }
}

export default createSaga;

=== Мое действие:

function addData(data) {
    return {
        type: "ADD_DATA",
        data
    }
};

export default addData;

=== Мой индекс:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createSaga from './saga/saga'
import reducers from './reducers';
import createSagaMiddleware from 'redux-saga';

const sagaMidleWare = createSagaMiddleware();
const store = createStore(
    reducers,
    applyMiddleware(sagaMidleWare)
)

sagaMidleWare.run(createSaga, store.dispatch);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

=== Мой компонент (при необходимости):

import React, { Component } from 'react';
import { connect } from 'react-redux';

function addData(data) {
    return {
        type: "ADD_DATA",
        data
    }
};

class MainComponent extends Component {
    handleUpdate = () => {
        const { dispatch } = this.props;
        const data = 'hi';
        dispatch(addData(data));
    }

    render() {
        const { store } = this.props;
        return (
            <div>
                <button onClick={this.handleUpdate}>Click me!</button>
                <p>{store.state.toString()}</p>
            </div> 
        )
    }
}

export default connect(store => ({store}), dispatch => ({dispatch}))(MainComponent);

Answer 1

Проблема здесь

yield takeEvery("ADD_DATA", (action) => {
    console.log(action);
    dispatch(action);
});

Вы говорите, что каждый раз, когда отправляется ADD_DATA, еще один ADD_DATA должен отправляться снова, и снова, и снова ...

Кроме того, для sidenote вы должны передать еще одну сагу в качестве второго аргумента takeEvery, чтобы вы могли использовать эффект put вместо dispatch, например:

import { put, takeEvery } from 'redux-saga/effects'; 
yield takeEvery('ADD_DATA', function*(action) {
    yield put({type: 'ANOTHER_ACTION'});
});