미들웨어 사용해서 리덕스에 데이터 넣기

firestore 데이터를 리덕스 스토어에 넣으려면 비동기통신을 하는데 이때 미들웨어가 필요하다.

yarn add redux-thunk

리덕스 데이터를 수정할때 디스패치를 사용해서 액션을 감시했다.

액션이 디스패치(발생)되면 리듀서를 실행했다.

= 액션이 디스패치되고 리듀서에서 처리한다.

= 동기통신(하나가 끝나면 다음것 실행)

 

파이어스토어에서 우리가 데이터를 달라고 응답을 보내면 파이어스토어가 우리에게 데이터를 줄때까지 기다려야한다.

그래야 받아온 데이터를 리듀서에 넣고 상태값 업데이트 하라고 한다.

 

이때 미들웨어는 이 사이에서 사전작업이다.

어떤 액션이 디스패치되고 리듀서에서 처리하기 전 이 사이에 사전 작업을 할 수있도록 도와주는 중간다리

redux-thunk는 미들웨어 중 하나

 

configStore.js에서 설치한 리덕스청크 불러와준다.

import thunk from "redux-thunk";

 

미들웨어 추가

미들웨어 스토어에 적용 applymiddleware import필요

 

미들웨어 중 하나인 redux-chunk를 스토어에 넣었다.

이유는 파이어스토어에 있는 데이터 가져와서 쓰려면 비동기 통신을 해야하니까

리덕스에서 비동기 통신을 처리하기위해서!