Question

我无法理解我的Redux Saga middleWare有什么问题，因为每当我尝试启动Saga函数并在下面的组件MainComponent中发送它时 - 我得到一个{{ 1}}页面上的循环，所有元素都因内存泄漏而变得无法解决。

我将不胜感激任何帮助信息！

===我的Redux Saga MiddleWare：

stackoverflow

===我的行动：

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

Answer 1

问题出在这里

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

您说每次ADD_DATA被调度时，应该再次调度另一个ADD_DATA，并再次调度......

另外，在旁注中，你应该传递另一个saga作为takeEvery的第二个参数，这样你就可以使用put效果而不是dispatch，如下所示：

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

终极版/反应。在Redux-Saga中间件中获取stackoverflow循环

1 个答案: