redux-thunk로 redux에서 API 요청하기
1662 단어 APIredux thunkreduxAPI
- 기본적으로 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를 사용할 수도 있다.
Author And Source
이 문제에 관하여(redux-thunk로 redux에서 API 요청하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@citron03/redux-thunk로-redux에서-API-요청하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)