Redux MiddleWare - thunk, logger

1. logger

• 말 그대로 로그를 찍는 애
• 어떤 로그냐 Action이 Dispatch에 reducer에 그 때마다 어떤 액션인지를 log로 찍어볼 수 있게 해주는 미들웨어

2. thunk

• 미들웨어라는 게 리덕스상에서만 쓰는 것이 아니고, express에서도 써봤다.
• 미들웨어라는게 뭔지 생각을 해보면 서버로 get요청이 들어왔는데 미들웨어를 통해서 그 get요청에 대한 로직을 처리하기 전에 미들웨어가 먼저 실행이 된다. 그런식으로 요청하기 전에 컨베이어 벨트처럼 먼저 해야될 작업들을 해주는애가 미들웨어다.
• Redux도 똑같다. UI를 통해서 action이 일어나고 , dispatch로 action을 보내게 될 때 reducer의 action 객체가 건네지기 전에 이 미들웨어를 실행한다. 그래서 thunk는 reducer를 거치기 전에 통과하는 관문 같은 것이다.

2.1 flow 그림

2.2 설명

1. Action을 dispatch를 이용해서 reducer에 전달을 해주는데, 그 과정에서 만약 미들웨어를 적용했다면, reducer에 가기전에 미들웨어가 먼저 실행된다.
2. 근데 미들웨어에서 작업을 다 끝내고 이제 다음 미들웨어로 넘겨주고 싶으면 꼭 next를 호출해야한다.
3. 만약에 그 다음 미들웨어에서 next를 호출했는데, 미들웨어가 더 이상 없다면 그제서야 reducer로 전달이된다.
   • next 가 아니라 dispatch를 호출하면 reducer로 가는게 아니라 맨 처음으로 간다.

2.3 정리

• 이벤트 핸들러로 dispatch가 reducer로 전달이되면, thunk가 미들웨어를 만나서 api요청을 보내고 응답을 받고 그 다음에 dispatch가 찐으로 reducer에 전달이 된다.
• 그 다음에 update 진행