TIL #38 | Redux Thunk (2) - 비동기 통신

thunk에서 Promise 다루기

Thunk 함수를 통해 API를 호출하여 비동기 통신을 할 수 있다.

1) thunk 함수 구현

2) 리듀서 로직 구현

• extraReducers 사용: reducers에서 바로 구현되지 않는 기타 Reducer 로직을 구현할 때 시용한다. 주로 thunk 함수를 사용할 때 사용한다.

• 통신 진행중, 실패, 성공에 대한 케이스를 모두 상태로 관리하는 로직을 관리한다.

• pending, fulfilled, rejected

const initialState = {
  todos: [],
  isLoading: false,
  error: null,
};

export const __getTodos = createAsyncThunk(
  "getTodos",
  async (payload, thunkAPI) => {
  	try {
      const data = await axios.get("http://localhost:3001/todos");
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);


export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {},
  extraReducers: {
    [__getTodos.pending]: (state) => {
      state.isLoading = true; // 네트워크 요청이 시작되면 로딩상태를 true로 변경합니다.
    },
    [__getTodos.fulfilled]: (state, action) => {
      state.isLoading = false; // 네트워크 요청이 끝났으니, false로 변경합니다.
      state.todos = action.payload; // Store에 있는 todos에 서버에서 가져온 todos를 넣습니다.
    },
    [__getTodos.rejected]: (state, action) => {
      state.isLoading = false; // 에러가 발생했지만, 네트워크 요청이 끝났으니, false로 변경합니다.
      state.error = action.payload; // catch 된 error 객체를 state.error에 넣습니다.
    },
  },
});

export const {} = todosSlice.actions;
export default todosSlice.reducer;

3) dispatch 사용하기

	const dispatch = useDispatch();
	const { isLoading, error, todos } = useSelector((state) => state.todos);


  useEffect(() => {
    dispatch(__getTodos());
  }, [dispatch]);