[REACT] 리덕스에서 FireStore데이터 사용하기/ load할 때 firestore의 데이터 가져오기

리덕스에서 FireStore 데이터 사용하기

 

firestore데이터를 리덕스 스토어에 넣으려면

미들웨어 설치!

 

firestore에서 데이터를 가져올때 비동기 통신을 함

리덕스에 비동기 통신을 할 때 필요한 미들웨어를 설치해주어야한다.

 

미들웨어란?

리덕스 데이터를 수정할 때

액션이 디스패치되고 리듀서에서 처리하는 과정이 있다.

미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 역할을 한다.

액션이 일어나고 -> 미들웨어가 할 일 하기-> 리듀서에서 처리

 

yarn add redux-thunk

 

 

redux-thunk는 무엇을 하는 미들웨어인가?

액션생성함수가 무엇을 반환하지? 액션 객체를 반환한다.

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

 

리덕스는 기본적으로 액션 객체를 디스패치한다.

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

 

 

 

 

configStore.js에 미들웨어 추가

import {createStore, combineReducers, applyMiddleware} from "redux";
import thunk from "redux-thunk";
import words from "./modules/words";
import { createBrowserHistory } from "history";
 
export const history = createBrowserHistory();
 
const middlewares =[thunk];
 
const enhancer = applyMiddleware(...middlewares);
 
 
// 한 프로젝트에 스토어는 한개 / 스토어에 리듀서 한개
// 리듀서가 여러개이면 combineReducers에 뭉쳐줘야한다.
const rootReducer = combineReducers({words});
 
const store = createStore(rootReducer, enhancer);
 
export default store;

 

 

 

 

firestore적용하기

load할 때 데이터를 가지고 와보자

 

리덕스로 만든 모듈

bucket.js

 

const bucket_db = firestore.collection("bucket");
 
// 파이어베이스랑 통신하는 부분
export const loadBucketFB = () => {
  return function (dispatch) {
    
    bucket_db.get().then((docs) => {
      let bucket_data = [];
      docs.forEach((doc) => {
        // 도큐먼트 객체를 확인해보자!
        console.log(doc);
        // 도큐먼트 데이터 가져오기
        console.log(doc.data());
        // 도큐먼트 id 가져오기
        console.log(doc.id);
 
        if(doc.exists){
          bucket_data = [...bucket_data, {id: doc.id, ...doc.data()}];
        }
      });
 
      console.log(bucket_data);
      // 이제 액션 생성 함수한테 우리가 가져온 데이터를 넘겨줘요! 그러면 끝!
      dispatch(loadBucket(bucket_data));
    });
  };
};

 

리듀서를 고친다.

 

case "bucket/LOAD": {
      if(action.bucket.length >0){
        return { list: action.bucket };
      }
 
      return state;
    }

 

 

 

App.js에서 import해오고 사용하기

import { loadBucketFB} from "./redux/modules/bucket";

 

const mapDispatchToProps = (dispatch) => ({
  load: () => {
    dispatch(loadBucketFB());
  },
  create: (new_item) => {
    console.log(new_item);
    dispatch(createBucket(new_item));
  }
});
...