调用 saga 的生成器将进入无限循环答案

【问题标题】：Calling a generator of saga is going to a infinite loop调用 saga 的生成器将进入无限循环
【发布时间】：2021-03-31 19:22:55
【问题描述】：

从我的 Expense Creator 组件中，想要删除一个组件，该组件是通过 Expense Statement 中的 map 方法从对象数组生成的，该组件连接到 Redux 和 saga。（其中详细信息也存储在 Store 和本地 Storage 中)。

Saga 的问题是，delete 函数再次渲染的地方再次陷入无限循环。

这里是删除功能相关的基本流程，

/1)组件文件夹中的费用报表组件

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 Statment 中的Expense Creator 组件

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)减速器文件 /动作创建者

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) 传奇

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) 减速器

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

【问题讨论】：

标签： redux react-redux redux-saga

【解决方案1】：

您的动作创建者有误。 deleteHandlerSuccess 的类型为 DELETE_INIT，但它应该是 DELETE_SUCCESS。

这会导致无限循环，因为完成删除会导致它重新开始，而不是保存结果。

【讨论】：