Thunk API를 활용한 비동기 통신

새벽로즈·2023년 12월 5일

TIL

목록 보기

57/72

HTTP 기본 이해

HTTP는 독립적인 두 개체 간의 통신 방법이며, 다른 기종 간의 통신을 위한 약속이다.
웹(인터넷) 환경에서 데이터를 주고 받기 위한 방법으로 사용된다

HTTP 요청 및 응답 과정


axios.get('https://api.example.com/data/sample01', {
  timeout: 1000 // 1000ms 후에 타임아웃
})
.then(response => {
  console.log(response);
})
.catch(error => {
  console.log('Timeout or other error:', error);
});

HTTP 프로토콜의 활용 범위

HTTP는 브라우저-웹서버 통신뿐만 아니라 API 통신, 서비스 간 통신, IoT 장치, 모바일 애플리케이션, 클라우드 서비스, CDN 등 다양한 환경에서 활용된다

주요 HTTP 오류 코드

400번대 오류: 클라이언트 오류, 예를 들어, 잘못된 URL이나 요청 형식 등
500번대 오류: 서버 오류, 서버 내부에서의 문제로 인한 오류

fetch와 axios

fetch와 axios는 JavaScript 라이브러리로, HTTP 요청을 처리하는 도구이다.

axios의 장점


const apiInstance = axios.create({
  baseURL: 'https://api.example.com/data/',
  timeout: 1000, // 모든 요청에 대해 1000ms 후 타임아웃
});

const handleButtonClick = async (sampleNumber) => {
  try {
    const response = await apiInstance.get(`sample0${sampleNumber}`);
    console.log(response);
  } catch (error) {
    console.log('Timeout or other error:', error);
  }
};

fetch와 axios 선택 기준

프로젝트 요구사항과 개발 환경에 따라 적합한 도구 선택이 중요하며, 간단한 요청에는 fetch가 더 가벼우나, axios는 풍부한 기능 제공

심화 : 인스턴스와 인터셉터

const api = axios.create({
  baseURL: 'https://api.example.com'
});

api.interceptors.request.use(
  config => {
    console.log('Request sent at:', new Date().toISOString());
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.log('Request error:', error);
    return Promise.reject(error);
  }
);

api.interceptors.response.use(
  response => {
    console.log('Response received at:', new Date().toISOString());
    return response;
  },
  error => {
    if (error.response && error.response.status === 401) {
      console.log('Unauthorized access:', error);
    }
    return Promise.reject(error);
  }
);

export default api;

Thunk API를 활용한 비동기 통신

Thunk API를 통해 Redux 액션 생성자에서 비동기 작업을 처리할 수 있음.
Redux Thunk 미들웨어를 사용하면 액션 생성자에서 함수를 반환하여 비동기 작업을 수행할 수 있다

RTK(Redux Toolkit)에 내장되어있는 기능

Redux Toolkit은 Redux Thunk를 기본 미들웨어로 제공하고 있어 따로 설치할 필요가 없다
Redux Toolkit을 사용하는 프로젝트에서 비동기 작업을 쉽게 처리할 수 있도록 도와준다

미들웨어

Redux Thunk는 Redux 미들웨어로 작동함
액션을 디스패치하기 전과 후에 추가적인 로직을 실행할 수 있게 해준다.
비동기 작업을 처리할 때 중요한 역할을 한다.

함수를 dispatch 할 수 있다.

Redux Thunk를 사용하면 액션 생성자에서 객체 대신 함수를 반환할 수 있다.
함수 내에서 비동기 작업을 수행하고, 결과에 따라 다양한 액션을 디스패치할 수 있다.
전역 상태를 업데이트하는 데에 유용하다.

비동기 통신에 사용

Redux Thunk는 비동기 작업을 처리하는 데 주로 활용된다
특히 API 호출과 같은 비동기 통신에서 유용하게 쓰인다.
애플리케이션의 상태를 비동기적으로 업데이트할 때 효과적으로 활용된다.

Reducers 역할:

동기적 액션 처리에 주로 사용되며, 상태를 직접적으로 업데이트하는 데 활용된다.
createSlice 함수는 reducers 객체에 정의된 각 메서드에 대해 액션 타입을 자동으로 생성한다.

extraReducers 역할:

비동기 액션이나 외부에서 발생한 액션을 처리하는 데 사용한다.
액션 타입을 명시적으로 지정하며, createAsyncThunk를 사용한 비동기 액션에 대한 세 가지 상태별 액션 타입을 처리한다.
비동기 작업의 여러 상태에 따른 처리를 효율적으로 관리할 수 있다.

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    // 동기적 액션 핸들러
    addTodo: (state, action) => {
      // 직접 상태를 업데이트
    },
  },
  extraReducers: {
    // 비동기 액션 핸들러
    [__getTodos.pending]: (state, action) => {
      // 로딩 상태 처리
    },
    [__getTodos.fulfilled]: (state, action) => {
      // 요청 성공 시 상태 처리
    },
    [__getTodos.rejected]: (state, action) => {
      // 에러 상태 처리
    },
  },
});