React redux thunk, как я могу получить одно обновленное значение редуктора?

Question

У меня есть кнопка с функцией handleRedeploy в событии OnClick, и при нажатии кнопки она запускает функцию handleRedeploy.

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

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

В рамках действий redux это действие redeploy будет отправлено два действия, одно - cloneProjectRequest, другое - cloneParticipantRequest. CloneProjectRequest создаст новый проект, а cloneProjectRequest будет использовать этот новый идентификатор проекта, а также 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 })
    }
}

Однако я не могу получить новый созданный projectId после отправки функции cloneProject. Есть ли способ каким-то образом получить обновленный проект?

Я пытался отправить cloneProjectRequest и cloneParticipantRequest отдельно в handleRedeploy, но все равно не могу получить обновленный список проектов.

Это сработает, только если я объединю два действия вместе, но я буду использовать вложенную попытку перехвата, что, по моему мнению, может быть неправильным. Либо я могу получить постоянное значение редуктора, либо избавиться от вложенных попыток catch, если объединю два действия вместе.

Answer 1

В документе 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);