Redux toolkit - thunk 사용하여 비동기 작업 처리하기

Redux toolkit은 내부적으로 thunk를 내장하고 있어서, 미들웨어를 따로 설치하지 않아도 비동기 처리를 쉽게 할 수 있다.

당연히 컴포넌트 내부에서 비동기 처리를 할 수도 있다. 아래 코드처럼.

<button onClick={async () => {
  const res = await fetch('https://movieAPI.com');
  const data = await res.json();
  dispatch(set(data.value));
  }}>Search</button>

그러나 가독성과 재사용성이 떨어진다는 단점이 있다. 따라서 Redux Toolkit을 사용하여 비동기 처리도 컴포넌트 외부에서 관리하는 것이다. (관심사의 분리)

Redux toolkit - thunk 사용하기

<button onClick={async () => {
  dispatch(fetchMovieData());
  }}>+ async thunk</button>

(비동기 처리 분리)

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

const fetchMovieData = createAsyncThunk(
  // string action type value 
  // 이 값에 따라 pending, fulfilled, rejected가 붙은 액션 타입 생성
  'movie/actors', 
  
  // action creator callback
  // 프로미스를 반환하는 비동기 함수
  async () => {
  	const res = await fetch('https://movieAPI.com');
    const data = res.json();
    return data;
  };
  
);

createAsyncThunk

• 액션 타입 문자열, 프로미스를 반환하는 비동기 함수이다.
• 입력받은 액션 타입 문자열을 기반으로 프로미스 라이프사이클 액션 타입을 생성하고, thunk action creator를 반환한다.

---

참고
https://youtu.be/K-3sBc2pUJ4