Redux thunk...

[KimKwon]

#12

Redux thunk란,

리덕스 미들웨어의 일종이다.
비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어이다.

• 기본적으로 리덕스가 디스패치할 때는 다음과 같이 액션 객체를 디스패치한다.

dispatch({ type: TEST_CASE });

Basic Thunk example

 // 액션 생성자 함수.
function testCase(){
  return { type: TEST_CASE };
}

// 액션 생성자 함수 (thunk)
function testCaseAsync(){
  return dispatch => {
  // 함수를 디스패치할 때는, dispatch와 getState(필요시)를 파라미터로 넘긴다. 
    setTimeout( () => {
      dispatch(testCase());
    }, 1000);
  }
}

dispatch(testCaseAsync());

함수를 디스패치 함으로써 액션 생성자에 추가적인 기능을 부여할 수 있다.
( 특정 액션이 몇 초 뒤에 실행되게 한다거나, 조건부로 액션을 무시하게 하는 것 등 )

뭔가 대단해보이지만
실제로 thunk는 14줄 짜리 코드다.

> 참조 : https://github.com/reduxjs/redux-thunk/blob/master/src/index.js
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;

정말 대단한 사람들이 너무 많다...... 오늘도 자괴감 스택 +1

이러한 Redux thunk를 우리 프로젝트의 코드를 보며 이해해보자.

다음은 피드에 모든 포스트를 불러오는 함수이다.

export const getAllPosts = (token) => {
  return async (dispatch) => {
  // thunk를 이용하여 함수를 호출.
  // try, catch문을 사용하여 에러를 검출할 수 있도록 함.
    try {
      const response = await fetch(getApiPathPost('USER_POSTS'), {
        method: 'GET',
        headers: {
          'x-access-token': token,
        },
      });
      let result = null;
      if (response.status === 200) {
        result = await response.json();
        await dispatch(getAction(SUCCEED_TO_GET_ALLPOST, result.posts));
      } else {
        await dispatch(getAction(FAILED_TO_GET_ALLPOST, null));
      }
      // 위와 같이 한 액션생성자 함수에서 조건에 따라 다른 액션을 디스패치 할 수 있다.
      // 서버로부터 온 응답이 200, 즉 정상적으로 받았다면 성공했음을 의미하는 액션을 디스패치하고, 아니라면 실패를 알리는 액션을 디스패치한다.
      return result ? result.posts : null;
    } catch (error) {
      dispatch(getAction(FAILED_TO_GET_ALLPOST, { data: 'NETWORK_ERROR' }));
    }
  };
};

// /HomePage/index.jsx
  const { dispatch, token } = this.props;
    dispatch(PostAction.getAllPosts(token)).then((result) => {
      this.setState({ feed: result, feedLoading: false });
    });
  };

위와 같이 함수를 디스패치하고, 그 결과를 state에 적용하고 있다.

---

비동기관련 처리에 대해 공부하다보면 , promise 에 대해 한번 쯤은 들어봤을 것이다.
비동기처리를 하기위해 우리는 콜백함수를 사용하는데, 비동기에. 또 비동기가 물리다보면 다음과 같은 콜백지옥에 빠진다.

// 리브레위키 (콜백지옥) 참조
step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

이러한 콜백지옥의 해결책으로 ES6에 등장한 개념이 Promise 객체이다.
Promise 객체를 사용하면,
getUser().then().catch(err) 이러한 형태를 갖는 문법이 사용가능하다.

then을 사용하기 위해서는 getUser()가 Promise 객체를 반환해야한다. .
콜백 함수보다는 훨씬 가독성 좋고 catch를 통해 예외처리까지 가능하니 꼭 숙달하길바람.

---

React + Redux login example

참조 : https://github.com/cornflourblue/react-redux-registration-login-example

function register(user) {
    return dispatch => {
        dispatch(request(user));

        userService.register(user)
            .then(
                user => { 
                    dispatch(success());
                    history.push('/login');
                    dispatch(alertActions.success('Registration successful'));
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            );
    };

    function request(user) { return { type: userConstants.REGISTER_REQUEST, user } }
    function success(user) { return { type: userConstants.REGISTER_SUCCESS, user } }
    function failure(error) { return { type: userConstants.REGISTER_FAILURE, error } }
}

성공, 실패, 요청에 경우로 나눠 다른 액션을 디스패치 시키고 에러처리를 하고 있다.

앞으로 프로젝트에서의 Redux Thunk 사용...

위에서 말했다시피 비동기 처리를 해주는게 핵심이다.
우리 프로젝트에서 비동기처리 해줘야할게 어떤게 있을까 고민을 하고있다.