5주차 - 미들웨어(firestore 데이터를 리덕스 스토어에 넣으려면?)

firestore에서 redux로 데이터를 가지고 오는 건 서버에서 데이터를 받아오는 것과 같습니다.

서버에서 데이터를 가져올 때 바로바로 알 수 있나요??

아니요. 요청을 보내면 응답이 올 때까지 이 작업이 끝났는 지 끝나지 않았는 지 알 수 없습니다.

이런 걸 비동기 통신이라고 합니다.

 

즉, firestore에서 데이터를 가지고 오는 비동기로 데이터를 가지고 오는 것과 같습니다.

비동기로 데이터를 받아오면 이 데이터를 어디에 넣어줘야 할까요??

 

액션 생성 함수??

액션 생성 함수는 액션만 return 해줘야 합니다.

 

리듀서??

리듀서는 순수 함수여야 하기 때문에 파라미터(인자)로 받아오는 데이터만 사용 해야 합니다.

(외부에서 데이터를 가지고 오면 안됩니다. 서버에서 오는 데이터도 외부의 데이터 입니다!)

 

정답은 미들웨어를 사용하는 것입니다.

---

리덕스에서 FireStore 데이터 가지고 놀기

 

1) firestore 데이터를 리덕스 스토어에 넣으려면? (미들웨어 설치!)

: firestore에서 데이터를 가져올 때는 비동기 통신을 합니다.

리덕스에서 비동기 통신을 할 때 필요한 미들웨어를 설치 해보겠습니다.

 

미들웨어가 뭐냐구요?

리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠?

미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 거예요!

즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 됩니다!

yarn add redux-thunk

 

redux-thunk는 뭐하는 미들웨어일까?

: 우리 액션 생성 함수가 뭘 반환한다고 했었죠? 객체 반환하죠. 🙂

redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다!

(함수는 어떤 동작을 하는 코드의 모음입니다!)

그게 왜 필요하냐구요? 리덕스는 기본적으로는 액션 객체를 디스패치합니다!

→ 즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있겠죠!!

 

설치가 끝났다면! configStore.js에 미들웨어를 추가 해봅시다! 그럼 준비 끝!

import { createStore, combineReducers, applyMiddleware, compose } from "redux"; // ** (1) **
import thunk from "redux-thunk"; // ** (2) **
import bucket from "./modules/bucket";

const middlewares = [thunk];  // ** (3) **

const enhancer = applyMiddleware(...middlewares); // ** (4) **
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer); // ** (5) **

export default store;

(1) redux 패키지에서 applyMiddleware, compose를 import 한다.

(2) redux-thunk 패키지에서 thunk 미들웨어를 import 한다.

(3) const middlewares 상수에 thunk 미들웨어를 배열로 담는다. (미들웨어가 여러 개일 경우 여러 개를 쓴다.)

(4) const enhancer = applyMiddleware(...middlewares)

: applyMiddleware를 사용해서 미들웨어들을 하나로 묶는다.

(5) 리듀서와 미들웨어를 묶어서 store를 만든다.