Useeffect Is Dispatching An Action Infinitely Even With Dependencies

I'm having an infinite dispatch when using dispatch within useEffect. import React, { useEffect } from 'react' import TodoItem from './TodoItem' import { useDispatch, useSelector

Solution 1:

The saga itself is creating an infinite loop because you use the same action name “GET_TODOS” for both initiating the fetch and storing the results of the fetch. The action that you put from fetchTodos will be picked up again by your takeEvery.

You want two separate action types, for example “REQUEST_TODOS” and “RECEIVE_TODOS”. The request action has no payload, while the success action has a payload with the array of todos from your fetch. Your reducer would ignore the request action (unless you want to use it to set a property like loading: true). For the success action, your reducer will store the results of your fetch from the payload property.