firebase.js
import 'firebase/firestore'
const firestore = firebase.firestore();
export {auth, apiKey, firestore};
post.js
import {firestore} from '../../shared/firebase'
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));
})
}
}
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);
})
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);
})
[SET_POST] : (state, action) => produce(state, (draft) =>{
draft.list = action.payload.post_list;
})
const actionCreators = {
setPost,
addPost,
getPostFB,
}
export {actionCreators}
PostList.js
import { actionCreators as postActions } from '../redux/modules/post';
React.useEffect(()=>{
dispatch(postActions.getPostFB());
}, []);