Redux thunk 간단하게 알아보기

Redux thunk

Redux의 비동기 작업을 하기위해 필요한 미들웨어 중 하나 thunk! 
thunk는 액션객체가 아닌 함수로 디스패치 한다.

user의 정보를 가져오는 api 호출을 thunk 를 사용하여 만들어본다고 하면?

// 비동기 액션 크리에이터
function userInfoAction(data) {
  return (dispatch,getState) => {
	  axios.get("api/user")
      .then((res)=>{
          dispatch(userInfoSuccess(res.data));   
      })
      .catch((err)=>{
      	  ...
      })
  }
}

api를 호출할 비동기 액션 크리에이터를 만들어주었다.
thunk에서는 함수를 디스패치할때 dispatch,getState를 파라미터 값으로 받아주어야 한다.
dispatch를 매개변수로 사용 하기 때문에 비동기 요청 성공시에도 dispatch를 호출할 수 있는 것이다.
getState는 현재 상태를 조회할 수 있다. 

import {userInfoAction} from "./reducer/user"

const App = () =>{
	...
    
	const onClickUserInfo = () = >{
    	dispatch(userInfoAction(data))
    }
    
	return {
    	<button onClick={onClickUserInfo}>클릭<button>
    }
}

export default App

 

버튼을 클릭했을때 userInfoAction함수로 dispatch 하여 data를 전달한다.
redux는 액션을 객체로 디스패치 하기때문에 thunk는 이와 차이점이 있다.

 

// reducer

const USER_INFO_SUCCESS = 'USER_INFO_SUCCESS';

//액션 크리에이터
function userInfoSuccess(data) {
  return {
    type: USER_INFO_SUCCESS,
    data
  };
}


// 비동기 액션 크리에이터
function userInfoAction(data) {
  return (dispatch,getState) => {
	  axios.get("api/user")
      .then((res)=>{
          dispatch(userInfoSuccess(res.data));   
      })
      .catch((err)=>{
      	  ...
      })
  }
}

// reducer
cosnt reducer = (state,action) = >{
	...
}

dispatch 후 reducer에선 무슨일이 일어날까?!

userInfoAction 을 디스패치하게 되면  userInfoAction  함수 내에서 api요청이 가고
요청에 성공하면 useInfoSuccess 액션이 일어나서 
data를 reducer에 전달한다

😀

생각보다 thunk의 사용은 간단하다.
보면 알 수 있듯이 이게 전부다.  
그외에 특별한 기능을 추가하려면 로직을 짜야한다.
간단한 비동기 처리를 위해서라면 thunk의 사용을 고려하는 것이 좋을거같다