Redux-promise 는 언제 필요한가, dispatch에 then?

최근 리액트 강의를 듣는데 강의에서 redux, redux-promise 모듈을 사용했다.

사용하라 해서 사용했는데, 사용하다 보니 dispatch에 then을 사용했다.

그래서 원래는 then을 쓰지 못할 거라 생각이 들어 어떻게 then을 쓸 수 있는지, redux-promise 미들웨어를 언제 활용하는지도 알아보았다.

 

 

dispatch(registerUser(data)).then((response) => {
      if (response.payload.success) {
        props.history.push('/login');
      } else {
        alert('Register Failed!');
      }
    });

회원가입을 하는 코드이다.

registerUser 함수가 액션 생성자인데 코드는 아래와 같다.

 

export function registerUser(data) {
  const response = axios
    .post('/api/users/register', data)
    .then((res) => res.data)
    .catch((err) => err);

  return {
    type: REGISTER_USER,
    payload: response,
  };
}

Axios 라이브러리를 이용하여 api를 호출하고 있다. Axios는 Promise를 기반으로 하므로 response에는 Promise 객체가 담길 것이다.

 

그러면 액션의 payload에 Promise가 담기게 된다.

 

이때, redux-promise 미들웨어를 사용하지 않고 dispatch를 해보면

dispatch의 then에서 에러가 난다.

이걸 봤을 때 redux-promise가 dispatch에서 Promise를 반환할 수 있게 해주는 것 같다.

 

그럼 얘는 redux의 상태는 어떻게 될까 궁금해 then을 떼고 dispatch를 해보았다.

위 Axios 요청에서 반환된 값이 아닌 빈 객체만 들어간다..

redux-promise 미들웨어를 적용하고 dispatch를 하면 정상적으로 잘 동작한다.

 

* 따라서 액션 객체의 payload에 비동기 요청의 반환 값이 필요할 경우 redux-promise를 활용할 수 있겠다.

 

dispatch(registerUser(data)).then((response) => {
 // response: {  // 액션 객체의 형태
 //              type: 'REGISTER_USER',
 //              payload: // Api 호출의 결과값
 //            }
}

dispatch에 대한 설명은 npm의 readme에 나와있었다.. (https://www.npmjs.com/package/redux-promise)

미들웨어가 호출자에게 Promise를 반환한다고 한다. 그래서 dispatch가 Promise를 반환하게 되고 then을 사용할 수 있게 된다.