리덕스에서 FireStore 사용해보기

1. 파이어 스토어 데이터를 리덕스 스토어에 넣려면 "미들웨어"를 설치해야 함

 

yarn add redux-thunk로 미들웨어 설치

 

미들웨어는 뭘까? 리덕스는 데이터를 수정할 때 디스패치라는 것을 사용해 액션을 감시했다.

> 액션이 디스패치가 됐다면 리듀서가 처리를 했다.

> 액션이 디스패치 처리 > 리듀서에서 처리

 

파이어 스토어에 데이터 요청 > 파이어 베이스는 데이터를 준다 > 기다려야 함 (여기서 미들웨어 작동)

 

미들웨어는 리듀서에서 처리하기 전에 사전작업을 할 수 있게 도와주는 중간다리 역할

 

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

>> 액션 생성 하수 액션 크리에이터를 작성할 수 있게 도와준다.

>> 왜 필요하지? 리덕스는 기본적으로 액션 객체를 디스 패치하는 건데 이게 객체 말고 함수를 생성하면 어떤 액션이 발생하기 전에 조건을 줄 수 있다

아래처럼 import해주고 적용할 수 있다

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

export const history = createBrowserHistory();

const middlewares = [thunk]; //미들웨어 만들어줌

const enhancer = applyMiddleware(...middlewares); //스토어에 적용
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);

export default store;