Reducx 스토어를 업데이트할 수 없음

Reducx 스토어를 업데이트할 수 없음

프로젝트 생성 버튼이 있어내가 하고 싶은 것은 버튼을 클릭하면 새로운 프로젝트가 만들어지고 제품에 문제가 없으면 다음 단계로 가는 것이다.

클릭 핸들러에 대한 디스패치가 작동하고 있어, 에러가 있을 경우 Redex가 Faild Reducer를 실행하는 것을 볼 수 있지만,projectData.successStatus핸들러 내부에서는 다음 값을 얻을 수 없다.successStatusI want it to befalse. 여전히 이전 프로젝트 리스트의 성공여부 입니다.그래서 더nextStep()상태가 좋지 않다.

뭐가 잘못됐는지 누가 좀 도와줄래?

핸들러 버튼:

const handleNextButton = useCallback(() => {
    if (newProjectName) {
        const newProjectWithProjectName = {
            ...newProject,
            projectName: newProjectName,
        }
        dispatch(createNewProjectReq(newProjectWithProjectName)) // create new project
        if (projectData.successStatus) {
            nextStep()
        }
    }
}, [newProjectName, projectData])

작업에 대해 요청, 추가, 실패:

export const createNewProjectReq = (newProject) => async (dispatch) => {
    dispatch({ type: PROJECT_SENDING_REQUEST })
    try {
        const result = await createNewProject(newProject)
        const { project, message } = result.data.data
        dispatch({
            type: PROJECT_LIST_ADD,
            payload: { project, message },
        })
    } catch (error) {
        dispatch({ type: PROJECT_REQUEST_FAIL, payload: error.data.message })
    }
}

환원기 스위치:

switch (action.type) {
    case PROJECT_SENDING_REQUEST:
        console.log("PROJECT_SENDING_REQUEST")
        return {
            ...state,
            loading: true,
            successStatus: false,
        }
    case PROJECT_LIST_SUCCESS:
        console.log("PROJECT_LIST_SUCCESS")
        return {
            loading: false,
            projects: action.payload.projectListGroupByProjectId,
            successStatus: true,
            message: action.payload.message,
        }
    case PROJECT_LIST_ADD:
        console.log("PROJECT_LIST_ADD")
        return {
            ...state,
            loading: false,
            projects: [...state.projects, action.payload.project],
            successStatus: true,
            message: action.payload.message,
        }
    case PROJECT_REQUEST_FAIL: {
        console.log("PROJECT_REQUEST_FAIL")
        return {
            ...state,
            loading: false,
            successStatus: false,
            message: action.payload,
        }
    }
    default:
        return state
}

문제들

1. handleNextButton콜백(callback)은 동기식 코드다.
2. 환원기 기능도 동기식 코드다.
3. 상태는 일반적으로 고려된다.const 렌더 주기 동안, 즉 렌더 주기 또는 동기 코드 실행 중간에 변경되지 않는다.

이러한 이유로 인해 the는projectData상태가 아직 업데이트되지 않았으며, 조건부 검사는 작업이 처리되기 전에 수행된다.

해결책

당신은 단지 액션의 성공에 관심이 있어서 다음 단계로 갈 수 있기 때문에 비동기 액션으로부터 부울 값을 반환하고 그것을 기다릴 수 있다.

export const createNewProjectReq = (newProject) => async (dispatch) => {
  dispatch({ type: PROJECT_SENDING_REQUEST });
  try {
    const result = await createNewProject(newProject);
    const { project, message } = result.data.data;
    dispatch({
      type: PROJECT_LIST_ADD,
      payload: { project, message },
    });
    return true; // <-- success status
  } catch (error) {
    dispatch({ type: PROJECT_REQUEST_FAIL, payload: error.data.message });
    return false; // <-- failure status
  }
}

...

const handleNextButton = useCallback(() => {
  if (newProjectName) {
    const newProjectWithProjectName = {
      ...newProject,
      projectName: newProjectName,
    }
    dispatch(createNewProjectReq(newProjectWithProjectName))
      .then(success => {
        if (success) {
          nextStep();
        }
      });
  }
}, [newProjectName, projectData]);

데모

성공/실패 확률이 50%인 클릭 핸들러에서 비동기 함수를 호출하는 간단한 데모

참조URL: https://stackoverflow.com/questions/66898359/redux-store-cannot-update