React redux thunk how can I get one updated reducer value?

Question

I have a button with the handleRedeploy function on OnClick event and when click the button, it will fire handleRedeploy function then.

...onClick={() => {
   handleRedeploy(Project_ID)
}...

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

Within the actions of redux, that redeploy action will dispatch two actions, one is cloneProjectRequest and another is cloneParticipantRequest. The cloneProjectRequest will create a new project and the cloneProjectRequest will use that new project Id as well as the clonedProjectId as the paremeter.

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 })
    }
}

However, I cannot get the new created projectId after I dispatch the cloneProject function. Is there a way I can get the updated project somehow?

I was trying to dispatch cloneProjectRequest and cloneParticipantRequest seperate in handleRedeploy as well, but still cannot get the updated project list.

It is only working if I combine two actions together, but I will use a nested try catch, which I feel maybe wrong.

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 })
    }
}

Can someone has idea how to fix this? Either I can get the lasted value of a reducer or I can get rid of nested try catch if I combine two actions together.

Answer 1

On the document, https://react-redux.js.org/introduction/quick-start#connect

I think you need to add the following to the component:

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);