[ React ] redux-thunk

install ( yarn, npm)

yarn add redux-thunk

npm install redux-thunk

• 리덕스 미들웨어

• 리덕스를 만든 사람이 만들었음.(Dan)

• 리덕스에서 비동기 처리를 위한 라이브러리.

• 액션 생성자를 활용하여 비동기 처리.

• 액션 생성자가 액션을 리턴하지 않고 함수를 리턴함.

Before ( redux-thunk 사용전 )

userListContainer.jsx

import React, { useCallback } from 'react';
import UserList from '../../components/users/userList';
import { useDispatch, useSelector } from 'react-redux';
import { getUsersFail, getUsersState, getUsersSuccess} from '../../redux/actions';
import axios from 'axios';

  

const UserListContainer = () => {

	const users = useSelector((state) => state.users.data);
	const dispatch = useDispatch();
	const getUsers = useCallback(async () => {
		dispatch(getUsersState());
		await axios
			.get('https://api.github.com/users')
			.then((res) => dispatch(getUsersSuccess(res.data)))
			.catch((e) => dispatch(getUsersFail(e)));
	}, [dispatch]);

  

return <UserList users={users} getUsers={getUsers} />;

};

  

export default UserListContainer;

actions.jsx

export const getUsersState = () => {  
  // API 호출 시작 (로딩을 시작)  
  return { type: GET_USERS_STATE };  
};  
export const getUsersSuccess = (data) => {  
  // API 호출 성공(로딩을 끝내고 데이터 출력)  
  return { type: GET_USERS_SUCCESS, data };  
};  
export const getUsersFail = (error) => {  
  // API 호출 실패(로딩을 끝내고 에러 출력  
  return { type: GET_USERS_FAIL, error };  
};

after ( redux-thunk 사용후)

import React, { useCallback } from 'react';  
import UserList from '../../components/users/userList';  
import { useDispatch, useSelector } from 'react-redux';  
import { getUsersThunk } from '../../redux/actions';  
  
const UserListContainer = () => {  
  const users = useSelector((state) => state.users.data);  
  
  const dispatch = useDispatch();  
  const getUsers = useCallback(() => {  
    dispatch(getUsersThunk());  
  }, [dispatch]);  
  return <UserList users={users} getUsers={getUsers} />;  
};  
  
export default UserListContainer;

export const getUsersThunk = () => {  
  return async (dispatch) => {  
    dispatch(getUsersState());  
    await axios  
      .get('https://api.github.com/users')  
      .then((res) => {  
	        return dispatch(getUsersSuccess(res.data));  
        })
      .catch((e) => dispatch(getUsersFail(e)));  
	};
};
  

redux-thunk를 사용해서 컨테이너에서 호출하던 API를 actions에서 타입을 리턴하지 않고 비동기 API호출 함수를 리턴해서 컨테이너는 출력만 담당하고 API호출은 actions에서 담당하므로 유지보수가 매우 수월하다는 장점이 있습니다.