react js 使用 hooks 和 redux-saga 重复渲染组件

Question

I'm trying to fetch data using redux-saga. in result it renders my component over and over again every 2 or 3 seconds. this is my component:

const Farms = props => {

    useEffect(() => {
        props.listFarms();
    }, []);

    console.log(" [ FARMS ] let see that works :", props.farms);

    return (
        <div> </div>
    );
};

const mapStateToProps = state => {
    return {
        farms: state.farms
    }
};

const mapDispatchToProps ={ listFarms }

export default connect(mapStateToProps, mapDispatchToProps)(Farms);

and this is my saga generator:

function* getAllFarms () {
    try {
        console.log(' [ farms saga ] all farms');
        const allFarms = yield call(getFarmsAsync);

        yield put(listFarms(allFarms.data))
    } catch (error) {
        console.log(' [ farms saga ] ERROR');
    }
}

this is my console output: ( it doesn't stop )

anybody knows where is my mistake?

Answer 1

From your code and the console output, it is clear that you are invoking getAllFarms worker saga again and again using yield put(listFarms(allFarms.data)) .

In other words, getAllFarms worker saga is listening to the action produced by listFarms , therefore it is being executed recursively.