redux-thunk로 redux에서 API 요청하기

• 기본적으로 redux는 async await를 사용할 수 없다.
• 따라서, redux에서 비동기로 API 요청을 받아 데이터를 store에 저장하기 위해서는 redux-thunk 미들웨어 라이브러리를 사용해야 한다.
• npm i redux-thunk 으로 redux-thunk를 설치한다.

• import thunk from "redux-thunk"; 으로 불러와 store에 미들웨어로 등록한다.

// redux store 구현

import reducer from "./reducer";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
// redux-thunk 사용

const store = createStore(reducer, applyMiddleware(thunk)); // thunk 미들웨어 설정

export default store;

• action 함수에서 API를 요청한 뒤, dispatch로 응답한다.

import getApi from '../API/getApi';

export const FETCH_DATA = "FETCH_DATA";

// 미들웨어를 사용해 비동기로 dispatch
export const setData = (item = "") =>  async (dispatch) => {
    // 액션 객체를 리턴
    const data = await getApi(item);
    dispatch({ type: FETCH_DATA, payload: data });
}

• 기존의 방법과 같이 reducer에서 액션 객체에서 데이터를 받아 상태를 변경한다.

import {combineReducers} from 'redux';
import { FETCH_DATA } from './action';
import { initState } from './initState';

const fetchReducer = (state = initState, action) => {
    switch(action.type){
        // 데이터 불러오기 성공
        case FETCH_DATA : {
            const newDataState = action.payload;
            return newDataState;
        }
        default:
            return state;
    }
}

const reducer = combineReducers({fetchReducer});

export default reducer;

다른 미들웨어 라이브러리 선택지로 redux-saga를 사용할 수도 있다.