Redux Thunk

Redux Thunk

리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법
리덕스 미들웨어임
Thunk : 일부 지연된 작업을 수행하는 코드 조각을 의미하는 프로그래밍 용어

 

1 ) redux-thunk 없이 구현할 경우

thunk 나 promise 같은 미들웨어 없이 구현해도 상관없음

하지만 미들웨어는 중앙 집중식 접근 방식이기 때문에

구성 요소를 더 간단하게 일반화하고 한 곳에서 데이터 흐름을 제어할 수 있음

큰 규모의 애플리케이션에서 리덕스를 사용하기에 더욱 편리해짐

useEffect(() => {
  fetchPosts();
}, []);

async function fetchPosts() {
  const response = await axios.get("https://...");
  dispatch({ type: 'FETCH_POSTS', payload: response.data });
};

 

2 ) redux-thunk 를 사용해 구현할 경우

함수를 Dispatch Action 으로 사용하기 위해 Redux-Thunk 미들웨어 설치

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

npm install redux-thunk --save

 

redux-thunk 적용

const middleware = applyMiddleware(thunk);

 

actions 폴더로 분리하기

import axios from "axios";

export const fetchPosts = () => {
  return async function fetchPostsThunk(dispatch: any, getState: any) {
    const response = await axios.get("https://...");
    dispatch({ type: 'FETCH_POSTS', payload: response.data });
  };
};

 

modern ES2015 형태로 변경

export const fetchPosts = () => async (dispatch: any, getState: any) => {
  const response = await axios.get("https://...");
  dispatch({ type: 'FETCH_POSTS', payload: response.data });
};