Calling a generator of saga is going to a infinite loop

Question

From my Component that is Expense Creator want to delete a component which is being generated from array of object via map method in Expense Statement, which is connected to Redux and saga.(Where detail being stored in Store and local Storage as well).

Issue Here is with Saga, Where delete Function renders again again which stuck to an Infinite loop.

Here is the Basic Flow Related to Delete Function,

/1)Expense Statement Component in Component Folder

class ExpenseStatment extends Component {
   
    render() {
        let expenses = this.props.expense.map(expense => {
        return(<ExpenseCreator 
                key={expense.id}
                id={expense.id}
                title = {expense.title}
                price = {expense.price}
                editHandler = {this.props.onEdit}
                deleteHandler = {this.props.onDelete}
            /> )
        })
        return (
            <div className="ExpenseStatment">
                {expenses}
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) =>{
    return{
        onEdit : (id) => dispatch (budgetAction.editHandler(id)),
        onDelete : (id) => dispatch (budgetAction.deleteHandler(id))
    }
}

/2)Expense Creator Component in Expense Statment

export default class ExpenseCreator extends Component {
    render() {
        return (
            <div className = "ExpenseCreator" >
                <p>{this.props.title}</p>
                <p>{this.props.price}</p>
                <Button onClick={()=>this.props.editHandler(this.props.id)}><EditIcon/></Button>
                <Button onClick={()=>this.props.deleteHandler(this.props.id)}><DeleteIcon/></Button>
            </div>
        )
    }
}

/3)Reducer File /Action Creator

export const deleteHandler = (id) =>{>         
    return{
        type : DELETE_INIT,
        id :id
    }
}

export const deleteHandlerSuccess = (budgetApp) =>{
    return{
        type : DELETE_INIT,
        expense : budgetApp.expense,
  expenditure : budgetApp.expenditure
    }
}

/4) Saga

export function* deleteHandlerSaga(action){
    const localValue = JSON.parse(localStorage.getItem("budgetApp"));
    const updateValue = {...localValue};
    const editObjIndex = updateValue.expense.findIndex(item => item.id === action.id)
    updateValue.expense.splice(editObjIndex,1);
    const fetchPrice = updateValue.expense.map(x=>x.price).reduce((a,c) => a+c);
    updateValue.expenditure = fetchPrice;
    updateValue.editMode = false;
    console.log(updateValue.expense);
    yield localStorage.setItem("budgetApp",JSON.stringify(updateValue));
    yield put (actionType.deleteHandlerSuccess(updateValue);
}

/5) Reducer

case DELETE_SUCCESS:
            return{
                ...state,
                expense:action.expense,
      expenditure : action.expenditure
            }

Answer 1

You have a mistake in your action creators. deleteHandlerSuccess has type DELETE_INIT but it should be DELETE_SUCCESS.

This causes an infinite loop because completing the delete causes it to start again instead of saving the results.