0

我在 OnClick 事件上有一个带有 handleRedeploy 函数的按钮,当单击该按钮时,它将触发 handleRedeploy 函数。

...onClick={() => {
   handleRedeploy(Project_ID)
}...
const handleRedeploy = (Project_ID) => {
   dispatch(redeploy(Project_ID))
}

在 redux 的动作中,重新部署动作将调度两个动作,一个是 cloneProjectRequest,另一个是 cloneParticipantRequest。cloneProjectRequest 将创建一个新项目,并且 cloneProjectRequest 将使用该新项目 ID 以及 clonedProjectId 作为参数。

export const redeploy = (projectIdToClone) => async (dispatch, getState) => {
    dispatch(cloneProjectRequest(projectIdToClone))
    const projectIdNew = getState().projectReducer.projects[0].Project_ID
    dispatch(cloneParticipantRequest(projectIdToClone, projectIdNew))
}

const cloneProjectRequest = (projectIdToClone) => async (dispatch) => {
    try {
        const result = await cloneProject(projectIdToClone)
        dispatch({ type: PROJECT_LIST_ADD, payload: result })
    } catch (error) {
        dispatch({ type: PROJECT_LIST_FAIL, payload: error })
    }
}

const cloneParticipantRequest = (projectIdToClone, projectIdNew) => async (dispatch) => {
    try {
        const result = await cloneParticipantsByProjectID(projectIdToClone, projectIdNew)
        result.foreach((participant) => {
            dispatch({ type: PARTICIPANT_ADD, payload: participant })
        })
    } catch (e) {
        dispatch({ type: PARTICIPANT_ERROR, payload: e.message })
    }
}

但是,在调度 cloneProject 函数后,我无法获取新创建的 projectId。有没有办法以某种方式获得更新的项目?

我也试图在 handleRedeploy 中分派 cloneProjectRequest 和 cloneParticipantRequest ,但仍然无法获得更新的项目列表。

只有当我将两个动作组合在一起时它才有效,但我会使用嵌套的 try catch,我觉得这可能是错误的。

export const cloneProjectAndParticipant = (projectIdToClone) => async (dispatch) => {
    try {
        const resultNewProject = await cloneProject(projectIdToClone)
        dispatch({ type: PROJECT_LIST_ADD, payload: resultNewProject })
        try {
            const resultParticipants = await cloneParticipantsByProjectID(projectIdToClone, resultNewProject.id)
            resultParticipants.foreach((participant) => {
                dispatch({ type: PARTICIPANT_ADD, payload: participant })
            })
        } catch (e) {
            dispatch({ type: PARTICIPANT_ERROR, payload: e.message })
        }
    } catch (error) {
        dispatch({ type: PROJECT_LIST_FAIL, payload: error })
    }
}

有人知道如何解决这个问题吗?如果我将两个动作组合在一起,我可以获得减速器的持续值,或者我可以摆脱嵌套的 try catch。

4

1 回答 1

0

在文档上,https://react-redux.js.org/introduction/quick-start#connect

我认为您需要将以下内容添加到组件中:

import { connect } from 'react-redux';

/* component
   ...onClick={() => {
      this.props.handleRedeploy(Project_ID)
   }...
*/

const mapDispatchToProps = (dispatch) => {
  return {
    handleRedeploy : (Project_ID) => redeploy(Project_ID)(dispatch)
  }
};

export default connect(null, mapDispatchToProps)(component);
于 2020-07-14T06:23:43.027 回答