Async action creator

리덕스 액션 크리에이터에서 fetch할 때

import jasonPlaceholder from "../apis/jasonPlaceholder";

export const fetchPost = async () => {
  //BAD APPROACH!
  const response = await jasonPlaceholder.get("/posts");

  return {
    type: "FETCH_POSTS",
    payload: response,
  };
};

이런식으로 예전에 했던 것처럼 async await로 하면 안된다.
그 이유는 첫번째로 action creators must return plain JS objects with a type property. 참고로 리덕스 action creator 의 규칙은 이렇다.
1. 평범한(plain) JavaScript 객체를 반환해야 합니다.
2. 반환되는 객체는 type 속성을 포함해야 합니다.

그런데 위의 코드처럼 async/await를 사용한 경우 리덕스 액션 생성자는 평범한 객체를 반환하지 않고, Promise 객체를 반환하게 된다. 이러한 이유로 바벨에서 자바스크립트를 변환할때 object로 읽지를 않는다.

이러한 오류를 방지하려면 리덕스 미들웨어(Redux middleware)를 사용하여 비동기 액션을 처리해야 한다. 대표적으로 redux-thunk 미들웨어를 사용하여 비동기 로직을 처리할 수 있다.