antd design pro dispatch infinite loop

related codes

table
code as follows

<span
  className={Style.opt}
  style={{
    color: record.display === 1 ? notClickColor : canClickColor,
    cursor: record.display === 1 ? notClickCursor : canClickCursor,
  }}
  onClick={() => {this.editSource(index, record.display !== 1)}}
>
  
</span>

editSource = (index, state) => {
const { sourceList: { tableList }, dispatch } = this.props;
if (state) {
  const newData = this.transformEditData(JSON.parse(JSON.stringify(tableList[index])));
  console.log("step1");
  dispatch({
    type: "sourceList/editSource",
    payload: newData,
  });
  console.log("step2");
  dispatch({
    type: "sourceList/editId",
    payload: tableList[index].id,
  });
  console.log("step3");
  this.setState({
    showEdit: true,
  });
  console.log("step4");
}
  }

effects is as follows

*editSource({ payload }, { put }) {
  console.log("editSource");
  yield put({
    type: "editSource",
    payload,
  });
},
*editId({ payload }, { put }) {
  console.log("editId");
  yield put({
    type: "editId",
    payload,
  });
}

reducers is as follows

editSource (state, {payload}) {
return {

...state,
editSource: payload,

};
},
editId (state, {payload}) {
return {

...state,
editId: payload,

};
}

now when executing the editSource function, step1 is printed out in log, and the first dispatch is also executed, but not later, the editSource in effects is executed all the time