01.16 리덕스 미들웨어와 외부데이터 연동
React.js 01.16. 리덕스 미들웨어와 외부데이터 연동 웹 애플리케이션을 만들 때는 대부분 서버와 데이터를 연동해야한다. 데이터를 연동하려면 일반적으로 서버에 구현된 REST API에 Ajax를 요청하여 데이터를 가져오거나 입력해야한다. 01.16.1. 리덕스 미들웨어(middleware)란? 액션을 디스패치했을 때 리듀서 에서 이를 처리하기 전 에 사전에 지정된 작업 들을 실행한다. (미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다.) 미들웨어가 할 수 있는 작업은 여러 가지가 있다. 단순히 전달받은 액션을 콘솔에 기록할 수도 있고, 전달받은 액션 정보를 기반으로 액션을 취소해 버리거나 다른 종류의 액션을 추가로 디스패치할 수도 있다. 01.16.1.1. 미들웨어 생성 // src/lib/middlewareTest.js const middlewareTest = store => next => action => { // 현재 스토어 상태 값 기록 console.log( '현재 상태' , store.getState()); // 액션 기록 console.log( '액션' ,action); // 액션을 다음 미들웨어 또는 리듀서에 전달 const result = next(action) ; // 액션 처리 후 스토어의 상태를 기록 console.log( '다음 상태' , store.getState()); return result; // 여기에서 반환하는 값은 store.dispatch(ACTION_TYPE)했을 때 결과로 설정한다. } export default middlewareTest; // 내보내기 store 와 action 은 익숙하지만, next 는 익숙하지 않다. next는 store.dispatch 와 비슷한 역할이다. 차이점은 ...