redux-thunk

간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다.

thunkMiddleware

// thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다
// 기본적으로 action은 객체
const thunkMiddleware = (store) => (next) => (action) => {
  //비동기는 함수로 넣어주겠다는 약속
  if (typeof action === "function") {
    return action(store.dispatch, store.getStats);
  }

  // 동기
  return next(action);
};

thunkMiddleware을 만들고 enhancer에 넣어준다. 

동기는 기본적으로 객체로 받고, 비동기는 함수로 받는 것이 약속이다. 따라서 if문을 활용해 action이 함수이면 비동기로 실행하고, 객체이면 동기로 수행한다.

동기(sync)

-로그인 예제

action

// async action creator, 비동기일땐 함수를 리턴해야함
// 동기 action들 간의 순서를 속이는 것이 비동기이다
const logIn = (data) => {
  return (dispatch, getState) => {
    // 로그인 요청
    dispatch(logInRequest(data));

    try {
      //로그인 성공
      setTimeout(() => {
        dispatch(
          logInSuccess({
            userId: 1,
            nickname: "zerocho",
          })
        );
      }, 2000);
    } catch (e) {
      //로그인 실패
      dispatch(logInFailure(e));
    }
  };
};

const logInRequest = (data) => {
  return {
    type: "LOG_IN_REQUEST",
    data,
  };
};

const logInSuccess = (data) => {
  return {
    type: "LOG_IN_SUCCESS",
    data,
  };
};

const logInFailure = (error) => {
  return {
    type: "LOG_IN_FAILURE",
    error,
  };
};

로그인 request를 보내고 성공하냐 실패하냐를 알려주는 예제이다. 

동기는 함수로 만들어서 리턴을 해줘야 하기 때문에 "() => {}"의 형태로 리턴을 한다. 리턴하는 함수 안에서는 객체(동기) 형식으로 처리를 할 수 있다.

reducer

const initialState = {
  isLoggingIn: false,
  data: null,
};

const userReducer = (prevState = initialState, action) => { // 새로운 state 만들어주기
  switch (action.type) {
    case 'LOG_IN_REQUEST':
      return {
        ...prevState,
        data: null,
        isLoggingIn: true,
      };
    case 'LOG_IN_SUCCESS':
      return {
        ...prevState,
        data: action.data,
        isLoggingIn: false,
      };
    case 'LOG_IN_FAILURE':
      return {
        ...prevState,
        data: null,
        isLoggingIn: false,
      };
    case 'LOG_OUT':
      return {
        ...prevState,
        data: null,
      };
    default:
      return prevState;
  }
};

module.exports = userReducer;

action이 수정되었으니 reducer도 수정해야 한다.

결과

맨 첫 로깅에 함수가 있어서 동기라는 의미이다.

그리고 2, 3번째 로깅은 객체로 나오기 때문에 비동기이다.