[TIL]

Redux-thunk

: 리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할때 가장 기본적인 방법으로는 redux-thunk라는 미들웨어를 사용하는 것이다. thunk란, 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼것을 칭한다.

Use

: redux-thunk 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해준다. Redux에서는 기본적으로는 액션객체를 디스패치한다. 일반 액션 생성자는, 파라미터를 가지고 액션 객체를 생성하는 작업만 한다.

const actionCreator = (payload) => ({action: 'ACTION', payload});

만약 특정 액션이 몇초 뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 하려면, 일반 액션 생성자로는 할 수가 없다. 하지만, redux-thunk는 가능하다.

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  }
}

// store.dispatch(incrementAsync());를 하면 INCREMENT_COUNTER 액션이 1초 뒤에 dispatch된다.

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

dispatch, getState를 파라미터로 받게 한다면 스토어의 상태에도 접근 할 수 있다. 따라서, 현재의 스토어 상태의 값에 따라 액션이 dispatch 될 지 무시될지 정해줄 수 있다.
보통의 액션생성자는 그냥 하나의 액션객체를 생성할 뿐이다. 하지만, redux-thunk를 통해 만든 액션생성자는 그 내부에서 여러가지 작업을 할 수 있다.
redux-thunk 미들웨어에서, 전달받은 액션이 함수 형태 일때, 그 함수에 dispatch와 getState를 넣어서 실행해준다.

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

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

export default thunk;

[참고 블로그] https://velopert.com/3401