221227 - TIL

const patchCategoryThunk = createAsyncThunk(
  "Board/patchCategory",
  async (payload, thunkAPI) => {
    const [nameBtn, BoardItemId, category] = payload;
    try {
      const categoryList = [
        "todo",
        "working",
        "validate",
        "complete",
        "archive",
      ];

      let nextCategory = category;
      if (nameBtn === "nextCategory") {
        const nextStep = categoryList[++nextCategory];
        axios.patch(`${BASE_URL}/${BoardItemId}`, {
          category: nextStep,
        });
      } else {
        const prevStep = categoryList[--nextCategory];
        axios.patch(`${BASE_URL}/${BoardItemId}`, {
          category: prevStep,
        });
      }
      return thunkAPI.fulfillWithValue([BoardItemId, nextCategory]);
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message);
    }
  }

리덕스 thunk로 코드를 수정했습니다. 비동기처리가 안된 상태로도 동장을 하지만, 근본적인 방법은 아니기에 위와 같이 수정했습니다. 추가 리팩토링은 시간보고 되면 진행할 생각입니다 (안할수도)

기존에는 아래와 같이 그냥 reducer로 정의해서 사용했기에 비동기 처리가 안되있습니다.

toggle: (state, action) => {
      const categoryList = [
        "todo",
        "working",
        "validate",
        "complete",
        "archive",
      ];

      //action= [ 버튼 종류 , board.id, current category] 를 입력 받습니다.
      const nameBtn = action.payload[0];
      const boardId = action.payload[1];
      let currentCategory = action.payload[2];

      if (nameBtn === "nextCategory") {
        const nextStep = categoryList[++currentCategory];
        axios.patch(`${BASE_URL}/${boardId}`, {
          category: nextStep,
        });
        state.boards.forEach((todo) => {
          if (todo.id === boardId) {
            todo.category = categoryList[currentCategory];
          }
        });
      } else {
        const prevStep = categoryList[--currentCategory];
        axios.patch(`${BASE_URL}/${boardId}`, {
          category: prevStep,
        });
        state.boards.forEach((todo) => {
          if (todo.id === boardId) {
            todo.category = categoryList[currentCategory];
          }
        });
      }
    },
    deleteBoard: (state, action) => {
      console.log("delete 확인", action.payload);
      axios.delete(`${BASE_URL}/${action.payload}`);
      state.boards = state.boards.filter(
        (board) => board.id !== action.payload
      );
    },