Question

我有一个redux模式，我想要做的是：发送一个将显示模态的事件，并在该模态内点击确认按钮，触发另一个将删除该记录的操作。根据我的理解，这是一个两个动作的过程，但我很好奇的是，如果有办法，我可以把它变成一个单一动作的过程。

目前在我的组件

中

class Details extends Component { 
  deleteRecord() {
     this.props.deleteRecord();
  }
}

我的行动

export const showConfirmationModal = (id) => {
  return {
    type: 'SHOW_MODAL',
    modalType: 'CONFIRMATION_MODAL',
    component:  ConfirmationModal,
    modalProps: {
      name: 'Record Name',
      id
    }
  };
};

export const deleteRecord = (id) => {
  return {
    type: 'DISPATCH_DELETE_RECORD',
    id
  };
};

然后在DISPATCH_DELETE_RECORD操作中的传奇内容

function* documentRecordFlow(action) {
  try {
    const { id } = action;
    yield call(agent.records.delete, id);
    yield put({ type: DELETE_RECORD_SUCCESS, id });
  } catch (error) {
    yield put({ type: DELETE_RECORD_ERROR, errors: [error] });
  } finally {
    if (yield cancelled()) {
    }
  }
}

有没有办法，这两个动作可以转换成一个动作。我尝试从我的on_confirmation事件中调度一个事件。

export const showConfirmationModal = (id) => {
  return {
    type: 'SHOW_MODAL',
    modalType: 'CONFIRMATION_MODAL',
    component:  ConfirmationModal,
    modalProps: {
      onConfirm: () => deleteRecord(id)
    }
  };
};

但这似乎不起作用。在后一种方法中我肯定会做错事，但我确信前者是解决这个问题的多余方法。

提前致谢。

Answer 1

如果两个动作分派的类型不是传闻的一部分，则不能指定为一个动作，你有两个选择：

您可以在reducer中侦听DELETE_RECORD_SUCCESS操作，并以此方式关闭模式。
在DELETE_RECORD_SUCCESS
之后添加一个结束发送
function* documentRecordFlow(action) { try { const { id } = action; yield call(agent.records.delete, id); yield put({ type: DELETE_RECORD_SUCCESS, id }); yield put({ type: SHOW_MODAL, ...yourPayload }); } catch (error) { yield put({ type: DELETE_RECORD_ERROR, errors: [error] }); } finally { if (yield cancelled()) { } } }
如果DELETE_RECORD_SUCCESS是＆＃34; commit＆＃34;是一个不错的选择。行动，意味着一切都已更新，这只是准备或清理州的成功指标。关闭模态将适合行动意义的上下文。
是一种更易读的方法，更常用。

Answer 2

好的所以我已经能够通过将回调函数作为道具传递给我的模态来解决我的情况

export const showConfirmationModal = (id) => {
  return {
    type: 'SHOW_MODAL',
    modalType: 'CONFIRMATION_MODAL',
    component:  ConfirmationModal,
    modalProps: {
      onConfirm: () => deleteRecord(id)
    }
  };
};

然后在我的确认模态组件中，我所做的是调度一个将我的回调函数作为有效负载的事件

class ConfirmationModal extends Component {
   onConfirm() {
      this.props.confirmAction(this.props.callback);
   }
}

export default connect(...state, { 
  confirmAction: (callback) => ({ type: 'CONFIRM_TRIGGERED', callback }) 
})(ConfirmationModal);

我的传奇然后在 put 效果的帮助下做了神奇的部分

function* modalWatcher() {
  yield takeLatest('CONFIRM_TRIGGERED', ({ callback })* => {
    yield put(callback);
  });
}

React redux模态，触发确认模态

2 个答案: