firebase 연동하기

firestore 시작하기

컬렉션 생성 & 데이터 삽입

firestore 연동하기

firebase.js

import

import 'firebase/firestore'

export

const firestore = firebase.firestore();

export {auth, apiKey, firestore};

post.js

import

import {firestore} from '../../shared/firebase'

middleware

• getPostFB 함수 만들기

• firestore에서 데이터 가져오기 - firebase docs 참고

const getPostFB = () =>{
    return function(dispatch, getState, {history}) {
        // firestore에 있는 데이터베이스에 접근
        // collection 선택
        const postDB = firestore.collection('post');

        // firestore에서 collection에 있는 데이터 가져오기
        postDB.get().then((docs) =>{
            // setPost() -list로 넘어가기 때문에 배열안에 데이터들을 넣어줘야함
            let post_list = [];

            // 데이터 하나하나 불러오기 (2가지 방법)
            docs.forEach((doc) =>{ 
            
            })

            dispatch(setPost(post_list));
        })
    }    
}

• 데이터 불러오는 방법 1

       let post_list = [];

       docs.forEach((doc) =>{
           // Post.js 데이터 형태 맞추기
           let _post = {
               id: doc.id,
               ...doc.data()  // spread 문법
           };
           let post = {
               id: doc.id,
               user_info: {
                   user_name: _post.user_name,
                   user_profile: _post.user_profile,
                   user_id: _post.user_id,
                 },
                 image_url: _post.image_url,
                 contents: _post.contents,
                 comment_cnt: _post.comment_cnt,
                 insert_dt: _post.insert_dt,
           }

           post_list.push(post);
       })

• 데이터 불러오는 방법 2

       let post_list = [];

       docs.forEach((doc) =>{
           let _post = doc.data(); // firestore에서 가져온 값들

           // dictionary의 키값들을 배열로 만들기 => 배열이 되면 내장함수 사용 가능
           //  ['comment_cnt, 'contents', ...]
           
           let post = Object.keys(_post).reduce((acc,cur) =>{
           
               // 키값에 user_가 포함되어 있는가?
               if(cur.indexOf('user_') !== -1){
                   // user_info: {}에 해당하는 부분
                   return {
                       ...acc, 
                       user_info:{...acc.user_info, [cur]: _post[cur]}}
               }
               
               // 변수안의 key 값 [] :value
               return {...acc, [cur]:_post[cur]}
               
           }, {id: doc.id, user_info: {}}); // 기본값 id를 넣고 reduce 함수 돌리기
                
           post_list.push(post);
       })

reducer

• list를 action.payload로 넘어온 post_list로 바꿈

[SET_POST] : (state, action) => produce(state, (draft) =>{
            draft.list = action.payload.post_list;
        })

export

const actionCreators = {
    setPost,
    addPost,
    getPostFB,
}
export {actionCreators}

PostList.js

import

import { actionCreators as postActions } from '../redux/modules/post';

getPostFB 호출

• 컴포넌트가 처음 생성될 때 한 번만 실행하면 됨
  -> [ ] 빈배열 입력

React.useEffect(()=>{
	dispatch(postActions.getPostFB());
}, []);