[리액트를 다루는 기술] 15. 리덕스 미들웨어와 외부 데이터 연동

1. 서버의 API를 호출 할 때는 3가지를 고려

1) 로딩: 서버에 요청했을때, 서버가 응답 할 때 까지 로딩상태 설정

2) 성공: 해당 요청 사항이 성공했을떄

3) 실패: 해당 요청 사항이 실패했을때

2. 미들웨어와 비동기 작업

- 리덕스 미들웨어 

-> 액션을 디스패치 했을때 리듀서에서 이를 처리하기 전에 지정된 작업들을 실행

-> 미들웨어는 액션과 리듀서 사이에 중간자 역할

-> 액션-> 미들웨어 -> 리듀서 -> 스토어

const loggerMiddleware = store => next => action => {

console.log('체크내용(1)');

const result = next(action);

console.log('체크내용(2)');

return result;

}

3. 로거 미들웨어 직접 만들기 

- const LoggerMiddle = store => next => action =>{ 미들웨어 내용 }

-> next: 다음에 처리할 미들웨어에게 액션을 넘겨줌, 처리할 미들웨어가 없으면 리듀서로 전달

4. 미들웨어 적용하기

- applyMiddleware

- const store = createStore(modules, applyMiddleware(loggerMiddleware))

- 액션 정보를 아예 무시 할 수 있음

- 액션 정보를 가로채서 수정해서 리듀서로 전달 할 수 있음

- 네트워크, 비동기 작업을 할때 유리

5, redux-logger 사용

- yarn add redux-logger

- const logger = createLogger();

- const store = createStore(modules, applyMiddleware(logger));

6. redux- thunk 사용

- 특정 작업을 나중에 할 수 있도록 미루려고 함수 형태로 감싼 것을 의미

- const foo - () => 1+2

- 객체가 아닌 함수도 디스패치 할 수 있게 해줌  

-> 일반 액션 객체는 특정 액션을 디스패치 한 후 몇 초 후에 반영, 무시 할 수 없음

- 1초 뒤에 디스패치 하는 예제

function incrementAsync(){

return dispatch => {

setTimeout(()=>{

dispatch(increment());

},1000);

}

}

- 함수를 반환하는 함수를 thunk 함수라고 함

- dispatch와 getState를 파라미터로 가지는 새로운 함수를 반환해야함

- yarn add redux-thunk

- const logger = createLogger();

- const store = createStore(modules, applyMiddleware(logger, ReduxThunk));

7. 1초 뒤에 액션 디스패치

- export const incrementAsync = () => dispatch =>{

setTimeout(

() => {dispatch(increment())},

1000

);

}

8. 웹 요청 처리: promise

- propmise 기반 http 클라이언트 라이브러리를 사용

- promise란 ES6 문법 중에서 비동기 처리를 다루는데 사용

function printlater(number){

return new Promise(    // 새 promise를 만들어서 리턴

resolve =>{

setTimeout(

() =>{

console.log(number);

resolve(); // promise가 끝났음을 알림

}

), 1000

}

)

}

printlater(1)

.then(() => printlater(2))

.then(() => printlater(3))

.then(() => printlater(4))

- promise에서 결과 값을 반환 할 때는 resolve (결과 값)을 작성, 오류를 발생 시킬때는 reject를 작성

-> 여기서 반환하는 결과값과 오류는 .then 또는 .catch에 전달하는 함수의 파라미터로 설정

 

9. 웹 요청 처리: axios

- REST API란? 

REST(REpresentational State Transfer) '대표적인 상태 전달'

REST란, "웹에 존재하는 모든 자원(이미지, 동영상, DB 자원)에 고유한 URI를 부여해 활용"하는 것으로, 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미

- compoentDidMount(){

axios.get('http://...')

.then(response => console.log(response))

}

10. thunk, axios

export const getPost = (postId) => dispatch =>{

dispatch(getPostPending());

return getPostAPI(postid).then((response) => {

dispatch(getPostSuccess(response))

return response;

}).catch(error) => { 

dispatch(getPostFailure(error));

throw(error);

})

}

- 실행 -> 성공, 실패로 나뉘어서 보냄

loadData = async () => {

const {PostAcitons, number} = this.props;

try{
    const response = await PostActions.getPost(number);

   console.log(response);
}catch(e){

   console.log(e);

}

}

- awiat를 쓰는 함수 앞에 async를 붙여줌

- 기다려야 할 propmise 앞에는 await 키워드를 붙임

11. redux -  promise - middleware

- promise 기반의 비동기 작업을 편하게 해주기 위한 미들웨어

- yarn add redux-promise-middliware

- promise 객체를 payload로 전달하면 요청을 시작, 성공,실패 할때 액션의 뒷부분을

   _PENDING, _FULFILLED, _REJECTED를 붙여서 봔환함

-> SUCCESS, FAILURE로 커스터마이징이 가능함

const logger = createLogger();

const pm = promiseMiddle({

promiseTypeSuffixes: ['PENDING', 'SUCCESS','FAILURE']

});

const store = creatStore(modules, applyMiddleware(logger,pm))

export default store;

* 이로서 redux-thunk는 삭제됩니다.

- 액션 생성자 수정

12. redux-pender

- promise 기반 액션들을 관리하는 미들웨어가 포함되어 잇는 라이브러리

- yarn add redux-pender

- 액션 생성 함수와 리듀서의 액션 처리 관련 코드들을 간소화 할 수 있음

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"