Redux 商店無法更新

Question

我有一個按鈕觸發項目創建。 我想要做的是當我點擊按鈕時，它將創建一個新項目，如果產品沒有問題，它將 go 進入下一步。

點擊處理程序上的調度正在工作，如果出現錯誤，我可以看到 redux 運行失敗的減速器，但處理程序內的projectData.successStatus無法successStatus我希望它為false的最新值。 它仍然是以前的 retrive 項目列表成功狀態。 所以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
}

Answer 1

問題

1. handleNextButton回調是同步代碼。
2. Reducer 函數也是同步代碼。
3. State在渲染周期中通常被認為是const ，即它在渲染周期或同步代碼執行期間永遠不會改變。

由於這些原因， projectData state 尚未更新，條件檢查發生在處理操作之前。

解決方案

由於您真的只對操作的成功感興趣，因此您可以 go 進行下一步，您可以從異步操作返回 boolean 值並等待它或從中獲得 Promise-chain。

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

演示

使用單擊處理程序調用異步 function 的簡單演示，成功/失敗的幾率為 50%。