리덕스와 파이어베이스

컴포넌트 > 리덕스 > 파이어 베이스

 

리덕스 데이터를 파이어 스토어에 있는 데이터를 가져오고 사용해보자!..

 

일단 아래 모듈 설치해주자!

 

yarn add redux-thunk

---

리덕스는 디스패치가 액션을 감시하고 디스패치가 됐다면 리듀서가 실행됐다

 

액션 > 디스패치 > 리덕스 청크 미들웨어 > 리듀서 처리

 

액션생성함수는 액션을 반환하고 이것은 객체 이 객체 대신에 리덕스청크는 함수를 반환해준다

>> 객체 대신에 함수를 생성하는 액션생성함수 액션크리에이터를 작성할 수 있게 도와준다

 

어떤 액션이 발생하기 전에 조건을 줄 수 있음컴포넌트 > 리덕스 > 파이어 베이스

 

 

리덕스 데이터를 파이어 스토어에 있는 데이터를 가져오고 사용해보자!..

 

 

 

일단 아래 모듈 설치해주자!

 

 

 

yarn add redux-thunk

 

리덕스는 디스패치가 액션을 감시하고 디스패치가 됐다면 리듀서가 실행됐다

 

 

 

액션 > 디스패치 > 리덕스 청크 미들웨어 > 리듀서 처리

 

 

 

액션생성함수는 액션을 반환하고 이것은 객체 이 객체 대신에 리덕스청크는 함수를 반환해준다

 

>> 객체 대신에 함수를 생성하는 액션생성함수 액션크리에이터를 작성할 수 있게 도와준다

 

 

어떤 액션이 발생하기 전에 조건을 줄 수 있음

 

---

파이어베이스 데이터는 콜렉션 > id > 그리고 아이디 안의 요소들로 이루어져 있다.

 

 

configstore.js

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

export const history = createBrowserHistory();

const middlewares = [thunk];

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

export default store;

 

 

import { firestore } from "../../firebase";

const bucket_db = firestore.collection("bucket");

// Actions
const LOAD = "bucket/LOAD";
const CREATE = "bucket/CREATE";
const DELETE = "bucket/DELETE";
const UPDATE = "bucket/UPDATE";

const initialState = {
  //   list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
  list: [
    { text: "영화관 가기", completed: false },
    { text: "매일 책읽기", completed: false },
    { text: "수영 배우기", completed: false },
  ],
};

// Action Creators
export const loadBucket = (bucket) => {
  return { type: LOAD, bucket };
};

export const createBucket = (bucket) => {
  return { type: CREATE, bucket };
};

export const deleteBucket = (bucket) => {
  return { type: DELETE, bucket };
};

export const updateBucket = (bucket) => {
  return { type: UPDATE, bucket };
};

/// 파이어베이스 통신

export const loadBucketFB = () => {
  //파이어 베이스 데이터 불러오기
  return function (dispatch) {
    bucket_db.get().then((docs) => {
      let bucket_data = [];

      docs.forEach((doc) => {
        if (doc.exists) {
          bucket_data = [...bucket_data, { id: doc.id, ...doc.data() }]; //id를 넣어줘야 관리가 편의함
        }
      });
      console.log(bucket_data);

      //파이어 베이스 리덕스와 연결하기
      dispatch(loadBucket(bucket_data));
    });
  };
};

export const addBucketFB = (bucket) => {
  return function (dispatch) {
    let bucket_data = { text: bucket, completed: false };

    bucket_db.add(bucket_data).then((docRef) => {
      bucket_data = { ...bucket_data, id: docRef.id };
      dispatch(createBucket(bucket_data));
    });
  };
};

export const updateBucketFB = (bucket) => {
  return function (dispatch, getState) {
    const _bucket_data = getState().bucket.list[bucket];

    let bucket_data = { ..._bucket_data, completed: true };

    if (!bucket_data.id) {
      return; //아이디가 없으면 요청 하지마세요!
    }

    bucket_db
      .doc(bucket_data.id)
      .update(bucket_data)
      .then((docRef) => {
        dispatch(updateBucket(bucket));
      });
  };
};

export const deleteBucketFB = (bucket) => {
  return function (dispatch, getState) {
    const _bucket_data = getState().bucket.list[bucket];
    if (!_bucket_data.id) {
      return;
    }
    bucket_db
      .doc(_bucket_data.id)
      .delete()
      .then((docRef) => {
        dispatch(deleteBucket(bucket));
      })
      .catch((error) => {
        console.log(error);
      }); // 오류가 나면 여길 실행
  };
};

// Reducer
export default function reducer(state = initialState, action) {
  console.log(action);
  switch (action.type) {
    // do reducer stuff
    case "bucket/LOAD": {
      if (action.bucket.length > 0) {
        return { list: action.bucket }; // 로드 하는부분 파이어스토어 연동
      }

      return state;
    }

    case "bucket/CREATE":
      console.log(state, action);
      const new_bucket_list = [...state.list, action.bucket];
      return { list: new_bucket_list };

    case "bucket/DELETE":
      const bucket_list = state.list.filter((l, idx) => {
        if (idx !== action.bucket) {
          return l;
        }
      });
      return { list: bucket_list };

    case "bucket/UPDATE": {
      const bucket_list = state.list.map((l, idx) => {
        if (idx === action.bucket) {
          return { ...l, completed: true };
        } else {
          return l;
        }
      });
      return { list: bucket_list };
    }

    default:
      return state;
  }
}