1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 09편과 동일한 패턴을 todos 도메인으로 다시 쓴 순수 Redux 비동기 흐름
const todosLoadStarted = () => ({ type: "todos/loadStarted" });
const todosLoadSucceeded = (todos) => ({ type: "todos/loadSucceeded", payload: todos });
const todosLoadFailed = (error) => ({ type: "todos/loadFailed", payload: error, error: true });

function fetchTodos() {
  return async (dispatch) => {
    dispatch(todosLoadStarted());
    try {
      const response = await fetch("/api/todos"); // 04편: async/await
      const todos = await response.json();
      dispatch(todosLoadSucceeded(todos));
    } catch (error) {
      dispatch(todosLoadFailed(error.message));
    }
  };
}

1
2
3
4
5
6
7
8
9

import { createAsyncThunk } from "@reduxjs/toolkit";

export const fetchTodos = createAsyncThunk(
  "todos/fetchTodos",      // 액션 타입 접두사 — pending/fulfilled/rejected가 이로부터 파생됨
  async () => {
    const response = await fetch("/api/todos"); // 04편의 async/await를 그대로 사용
    return await response.json(); // 이 반환값이 fulfilled 액션의 payload가 된다
  }
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const fetchTodos = createAsyncThunk("todos/fetchTodos", async () => {
  const response = await fetch("/api/todos");
  return await response.json();
});

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    items: [],
    status: "idle", // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
  },
  reducers: {
    // 17편에서 다룬 동기 액션들(todoAdded 등)은 여기에 그대로 둔다
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.status = "loading";
        state.error = null;
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.items = action.payload; // async 함수가 return한 값
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.error.message; // 예외 발생 시 자동으로 채워지는 에러 정보
      });
  },
});

export default todosSlice.reducer;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchTodos } from "./todosSlice";

function TodoList() {
  const dispatch = useDispatch();
  const { items, status, error } = useSelector((state) => state.todos);

  useEffect(() => {
    if (status === "idle") {
      dispatch(fetchTodos()); // configureStore(18편)에 기본 포함된 thunk 미들웨어가 처리
    }
  }, [status, dispatch]);

  if (status === "loading") return <p>로딩 중...</p>;
  if (status === "failed") return <p>에러: {error}</p>;

  return (
    <ul>
      {items.map((todo) => <li key={todo.id}>{todo.text}</li>)}
    </ul>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

export const fetchTodos = createAsyncThunk(
  "todos/fetchTodos",
  async (_, { rejectWithValue }) => {
    const response = await fetch("/api/todos");
    if (!response.ok) {
      const errorBody = await response.json();
      return rejectWithValue(errorBody); // action.payload로 전달됨 (action.error가 아님)
    }
    return await response.json();
  }
);

1
2
3
4
5

.addCase(fetchTodos.rejected, (state, action) => {
  state.status = "failed";
  // rejectWithValue를 썼다면 action.payload에, 아니면 action.error.message에 담긴다
  state.error = action.payload ?? action.error.message;
})

1
2
3
4
5
6
7

export const fetchTodoById = createAsyncThunk(
  "todos/fetchTodoById",
  async (todoId) => { // dispatch(fetchTodoById(3))일 때 todoId === 3
    const response = await fetch(`/api/todos/${todoId}`);
    return await response.json();
  }
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function SubmitButton() {
  const dispatch = useDispatch();

  const handleSubmit = async () => {
    try {
      const todo = await dispatch(addTodo(text)).unwrap(); // fulfilled면 payload를, rejected면 예외를 던진다
      showToast(`"${todo.text}" 추가됨`);
    } catch (error) {
      showToast(`추가 실패: ${error.message}`); // rejectWithValue를 썼다면 error가 그 값
    }
  };

  return <button onClick={handleSubmit}>추가</button>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

export const fetchTodos = createAsyncThunk(
  "todos/fetchTodos",
  async () => {
    const response = await fetch("/api/todos");
    return await response.json();
  },
  {
    condition: (_, { getState }) => {
      const { status } = getState().todos;
      return status !== "loading"; // false를 반환하면 이 dispatch 자체가 실행되지 않는다
    },
  }
);

1
2
3
4
5
6
7

export const fetchTodos = createAsyncThunk(
  "todos/fetchTodos",
  async (_, { signal }) => {
    const response = await fetch("/api/todos", { signal }); // dispatch(fetchTodos.abort())로 취소하면 fetch도 함께 중단됨
    return await response.json();
  }
);