다시 시작하는 리액트 - 리액트 실무 기초 5-1

 

5-1. 리덕스에서 Firestore 데이터 가져다 쓰기

 

1. 미들웨어란? :

firebase에서 데이터를 가져올 때 비동기 통신을 하고, 리덕스에서 비동기 통신을 할 때 필요한 것.

 

리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠?
미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 거예요!
즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 됩니다!

미들웨어도 종류가 굉장히 다양한데, 우리가 이번에 사용할 것은 미들웨어인 thunk 입니다.
redux-thunk는 뭐하는 미들웨어일까?
우리 액션 생성 함수가 뭘 반환한다고 했었죠? 맞아요! 객체 반환하죠.🙂
redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다!

그게 왜 필요하냐구요?
리덕스는 기본적으로는 액션 객체를 디스패치 합니다!
→ 즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있겠죠!!

 

일단, 미들웨어인 thunk를 먼저 설치해주겠음.

 

yarn add redux-thunk

 

설치가 끝났다면, configStore.js에 미들웨어를 추가하기.

 

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import bucket from "./modules/bucket";
import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

const middlewares = [thunk];

const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);
export default store;

 

store를 만들 때는 reducer들을 모아서 rootReducer라는 것을 만듦.

그리고 이 rootReducer에 플러스 알파로 옵셔널한 어떤 것들을 더해서 묶어서 최종적인 store를 만듦.

이 옵셔널한 것들 중 하나가 미들웨어.

 

reducer들도 하나로 묶어준 것처럼 미들웨어들도 하나로 묶어줘야 함.

=> const middlewares = [thunk];

 

그리고 밑에 enhancer라는 걸 하나 만들어줌.

enhancer에는 reducer 말고 옵셔널하게 추가하는 애들을 모아주면 됨.

여기 미들웨어를 적용해 넣을 것이기 때문에 applyMiddleware를 사용.(미들웨어를 spread를 써서 하나씩 전부 풀어서 넣어줌)

=> const enhancer = applyMiddleware(...middlewares);

 

그리고 rootReducer와 마찬가지로 옵셔널한 것들이 모인 enhancer를 createStore에 넣어주면 됨.

=> const store = createStore(rootReducer, enhancer);

 

 

2. Firestore 데이터를 가져와 추가, 수정, 삭제해보기.

 

이제 thunk setting이 끝났으므로 Firestore에 있는 데이터를 가져와 추가, 수정, 삭제 기능을 구현해볼 거임.

 

- firestore 적용하기 :

1. load할 때 데이터를 가지고 오기
2. create에 firestore 적용
3. update에 firestore 적용
4. delete에 firestore 적용

 

1. load할 때 데이터를 가지고 오기.

 

어떤 기능을 구현하던 thunk 사용 방법은 항상 같음.

- 일단은 액션부터. → 파이어베이스랑 통신하는 함수 만들기. → 리듀서 고치기. → 불러다 사용.

 

처음에 thunk를 이론으로 접했을 때는 솔직히 이해가 잘 가지 않았고 많이 어려웠음.

(역시 직접 코딩을 해봐야 이해도 되고 실력도 느는 것 같음...)

 

우리는 기존에 추가, 수정, 삭제 기능을 리덕스로 만들어뒀기 때문에 액션을 따로 만들어줄 필요는 없었음.

 

대신, 파이어베이스랑 통신하는 함수를 만들어 거기 관련된 기능들을 집어넣을 것이기 때문에

dispatch를 사용할 때 action creator를 기존의 것이 아닌, 파이어베이스랑 통신하는 함수로 변경해줘야 했음.

(나중에 파이어베이스랑 통신하는 함수 내에서 dispatch로 본래 사용하던 action creator를 호출해줘야 함.)

 

호출하지 않으면 Firestore의 database에는 변화가 적용이 되지만, 리덕스에는 변화가 일어나지 않음.

(이렇게 되면 삭제와 같은 기능을 구현해서 사용해도 새로고침 전까지 삭제가 되지 않고 사이트에 데이터가 보이게 됨.)

 

 

2. create에 firestore 적용.

 

3. update에 firestore 적용.

 

4. delete에 firestore 적용.