2019-06-22

Redux

오랜만에 프리코드캠프의 리덕스 챌린지 계속.

Redux: Use Middleware to Handle Asynchronous Actions

지금까지의 챌린지에서는 비동기 액션에 대한 논의는 피해왔지만, 웹 개발에 있어서 피할 수 없는 부분입니다. 어떤 시점에서 여러분은 리덕스 앱에서 비동기 엔드포인트를 호출할 필요가 있을 것인데, 이런 요청들은 어떻게 처리하겠습니까? 리덕스는 이러한 목적에 맞게 디자인 된 Redux Thunk라는 미들웨어를 제공합니다. 리덕스와 함께 어떻게 사용하는지 짧은 설명을 하겠습니다.

리덕스 Thunk 미들웨어를 인클루드 하기 위해서, Redux.applyMiddleware()의 인자로 전달해야 합니다. 이 구문은 그리고 createStore()의 옵셔널한 두번째 인자로 제공됩니다. 옆에 있는 코드 에디터의 아래 부분에 있으니 살펴보세요. 그리고, 비동기 액션을 생성하기 위해서, dispatch를 인자로 받는 액션 크리에이터에 함수를 리턴해야 합니다. 이 함수 안에서, 액션을 디스패치할 수 있고 비동기 요청을 수행할 수 있습니다.

이 예제에서는, 비동기 요청을 setTimeout() 호출로 모사하고 있습니다. 여러분의 어플리케이션 상태에 어떤 데이터가 요청되고 있다는 것을 알리도록 비동기 작업을 시작하기 전에 액션을 디스패치하는것이 보통입니다. (이 상태를 이용해 예를 들어 로딩 아이콘을 표시할 수 있습니다.) 그리고, 데이터를 받았다면, 액션이 완료되었다는 정보와 더불어 받은 데이터를 payload로 운반하는 또다른 액션을 디스패치 해야 합니다.

특별한 액션 크리에이터에 dispatch를 매개변수로서 전달하고 있다는 것을 기억하세요. 여러분은 이걸 사용해 액션을 디스패치 할 것이고, 여러분이 간단히 액션을 dispatch에 직접 전달하면 미들웨어가 나머지를 처리합니다.

handleAscync() 액션 크리에이터 안에 두 dispatch를 작성하세요. requestingData()를 setTimeout()(API 호출 모사) 전에 디스패치하세요. 그리고, (가장)데이터를 받은 후에, 이 데이터를 전달하며 receivedData()액션을 디스패치하세요. 이제 여러분은 리덕스에서 어떻게 비동기 액션을 처리하는지 알게 되었습니다. 그 밖의 모든 것들은 전과 똑같이 행동합니다.

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {
    // dispatch request action here
    dispatch(requestingData());

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // dispatch received data action here
      dispatch(receivedData(data));
    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);