Reactjs 重排/反应。在Redux Saga中间件中获得stackoverflow循环

我无法理解我的

Redux Saga中间件

有什么问题，因为每次我尝试启动

Saga

函数并在下面的组件

MainComponent

中分派它时，我都会在页面上得到一个

stackoverflow

循环，所有元素都会因为内存泄漏而变得不可清理

我将非常感谢任何帮助信息

==我的Redux传奇中间件：

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')
);

从“React”导入React；
从“react dom”导入react dom；
从“redux”导入{createStore，applyMiddleware}；
从'react redux'导入{Provider}；
从“./saga/saga”导入createSaga
从“./reducers”导入减速机；
从“redux saga”导入createSagaMiddleware；
const sagaMidleWare=createSagaMiddleware（）；
const store=createStore(
减速器，
applyMiddleware（sagaMidleWare）
)
sagaMidleWare.run（createSaga，store.dispatch）；
ReactDOM.render(
,
document.getElementById（'root'））
);

==我的组件（如果需要）：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
函数addData（数据）{
返回{
类型：“添加数据”，
数据
}
};
类MainComponent扩展组件{
handleUpdate=（）=>{
const{dispatch}=this.props；
常数数据='hi'；
调度（添加数据（数据））；
}
render（）{
const{store}=this.props；
返回(
点击我！
{store.state.toString（）}

)
}
}
导出默认连接（store=>（{store}），dispatch=>（{dispatch}））（MainComponent）；

问题就在这里

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

您的意思是，每次分派ADD_数据时，都应该一次又一次地分派另一个ADD_数据

另外，在旁注中，您应该传递另一个saga作为takeEvery的第二个参数，这样您就可以使用

put

效果，而不是像这样使用

dispatch

：

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

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