Reudx Thunk

• Redux Thunk는 Redux의 기능을 확장하는 미들웨어이다.
• 기본적으로 Redux는 store에 action을 dispatch하는 동기 방식 업데이트만 지원한다.
• Redux Thunk 미들웨어는 스토어의 기능을 확장하여 store와 인터렉션하는 비동기 로직을 액션에 포함하여 작성할 수 있도록 제공
  

npm i redudx-thunk

Thunk란?

• Thunk는 식을 래핑하여 수행을 지연시키는 함수를 의미

// 아래 계산은 즉시 처리
let x = 1 + 2;

// 아래 계산은 calc 함수를 호출할때까지 계산이 지연된다. 
// 그러므로 calc 함수는 Thunk이다. 
let calc = () => 1 + 2;

Eric Raymond는 뭔가를 몇 시간 동안 논의한 끝에 만들어지므로 "생각해봤습니다(Thunk)" 라는 용어의 탄생에 대해 회상했습니다.

장점

• 코드의 구성이 단순하고 러닝커브가 낮다.
• 아래 코드가 thunk의 전부

function createThunkMiddleware(extraArgment) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extracArgment);
    }
    
    return next(action);
  }
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

단점

• 다른 reudx 미들웨어(saga)에 비해 제공하는 기능이 없다.
• 하나의 액션에서 dispatch를 여러번 할수 있게 해주는 기능이 전부

특징

• Redux Thunk 미들웨어를 사용하면 dispatch 및 상태(getState)를 매개변수로 전달 받는 함수를 반환하는 액션생성함수 작성 가능
  • 기존의 redux는 액션을 객체로만 사용이되었는데 thunk는 액션을 함수로 사용할수 있게됨
• 액션 전달을 지연시키거나 특정 조건이 일치하는 경우에만 전달하는 로직도 작성할 수 있다.
• 하나의 비동기 액션함수에서 동기 액션함수 dispatch를 여러번 작성이 가능하다.
• 즉, 비동기 요청, 성공, 실패에 관한 액션들을 dispatch하는 로직을 쉽게 작성 가능

// 비동기 액션 생성 함수
function incrementAsync() {
  // 스토어의 메서드를 매개변수로 전달 받는 함수 반환
  return (dispatch) {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  };
}

조건부 디스패치 처리 함수를 반환하는 액션생성함수

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();
    if (counter % 2 === 0) {
      return;
    }
    dispatch(increment());
  }
}

사용자 정의

• Redux Thunk v2.1.0부터 withExtraArgument 함수를 사용하여 사용자 정의 전달인자(argumnent)를 삽입 할 수 있게됨

// API 경로
const api = "http://www.example.com/sandwiches/";

const store = createStore(
  rootReducer,
  // api를 Thunk 미들웨어 함수의 3번째 전달인자로 설정
  applyMiddleware(thunk.withExtraArgument(api)),
);

// 사용자 ID를 전달 받아 API를 통해 사용자 정보를 서버에 비동기 요청 후 처리하는 함수
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // 여기서 API를 사용할 수 있습니다.
  };

• 2개 이상의 인자를 전달하려면 객체로 묶어 전달한다.

const api = "http://www.example.com/sandwiches/";

// 다른 데이터
const whatever = 42;

const store = createStore(
  rootReducer,
  // 다수의 전달인자를 설정할 경우 객체로 묶어 전달합니다.
  applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);


function fetchUser(id) {
  return (dispatch, getState, { api, whatever }) => {
    // 여기서 API와 다른 데이터를 사용할 수 있습니다.
  };
}