융융이'Blog

REACT_API호출(redux-promise-middleware,redux-pender) 본문

2022이전/React

REACT_API호출(redux-promise-middleware,redux-pender)

바로퇴장 2020. 1. 27. 20:01

##Redux-thunk와 axios 사용

Image result for get Post thunk 다이어그램

Action(module)에서 사용하는 API 를 정의(리덕하고 필요한 정보를 리덕스에 저장하고 화면에 뿌려준다.

redux-promise-middleware

redux-promise-middleware는 Promise 기반의 비동기 작업을 좀더 편하게 해주는 미들웨어 입니다.
현재 createAction을 이용하여 커스텀하도록 이용하는 것만 되는거 같다... 저만 에러뜨나요? ㅠㅠ

yarn add redux-promise-middleware

store.js

import promiseMiddleware from 'redux-promise-middleware';

const pm = promiseMiddleware({
  promiseTypeSuffixes: ['PENDING', 'SUCCESS', 'FAILURE']
});

도큐봐서는 저렇게 사용하는게 맞는지 잘 모르겠네요 ==>그냥 맘 편하게 redux-pender쓰세요!

module.js

// redux-promise-middleware
export const getPost = (postId) => ({
  tpye: GET_POST,
  payload: getPostAPI(postId)
})

redux-pender

Redux-pender는 Promise 기반 액션들을 관리하는 미들웨어가 포함되어 있는 라이브러리입니다.

yarn add redux-pender

Redux-pender를 이용하면 액션 생성함수와 리듀서의 액션처리 관련 코드들을 간소화 할 수 있습니다.

관련 코드 보기: https://github.com/gmldbd94/react_redux_pratice