Redux/React。在 Redux-Saga 中间件中获取 stackoverflow 循环

Question

我无法理解我的 Redux Saga middleWare 有什么问题，因为每次当我尝试启动我的 Saga 函数并在下面的组件 MainComponent 中调度它时 - 我得到一个Whosebug 在页面上循环，所有元素因内存泄漏而变得不可复制。

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

=== 我的 Redux Saga 中间件：

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 Whosebug 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，一次又一次...

此外，在旁注中，您应该将另一个传奇作为 takeEvery 的第二个参数传递，这样您就可以使用 put 效果而不是像这样的 dispatch：

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

Redux/React。在 Redux-Saga 中间件中获取 stackoverflow 循环

Redux/React. Getting a stackoverflow loop in Redux-Saga Middleware

reactjs

redux

redux-saga

react-redux