- 리덕스에서 FireStore 데이터 가지고 놀기
(1) firestore 데이터를 리덕스 스토어에 넣으려면? (미들웨어 설치!🙂)
firestore에서 데이터를 가져올 때(엄밀히 말하면 서버에서 가져오는 것) 비동기 통신을 한다.
(비동기 통신은 서버에서 가져오는거라 바로바로 알 수 없다.)
리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구 먼저 설치할 거예요.
//미들웨어 설치
yarn add redux-thunk
- 미들웨어란?
리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 이라면,
미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 것이다.
즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 된다.
redux-thunk는 뭐하는 미들웨어일까?
액션 생성 함수는 객체를 반환한다.
redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해준다!
그게 필요한 이유는 리덕스는 기본적으로는 액션 객체를 디스패치한다. → 즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있다.
설치가 끝났다면! configStore.js에 미들웨어를 추가하기!
//applyMiddleware, compose : 미들웨어 추가할때 필요!
import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import bucket from "./modules/bucket";
export const history = createBrowserHistory();
//[thunk] : 배열로 쓰고 사용할 미들웨어를 그 안에 써주면 된다. 여러게 있을 경우 콤마하고 추가하기
const middlewares = [thunk];
//...middlewares : 미들웨어를 풀어헤쳐서 하나하나 넣겠다는 의미
const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);
export default store;미들웨어를 만들 때 rootReducer + option + option ... 이렇게 진행되는데 option들 중 하나가 미들웨어 이다.
(2) firestore 적용하기
- load할 때 데이터를 가지고 오자
-> 파이어베이스에 있는 데이터를 리덕스에 넣기위해 액션부터 만들기!
// 액션 타입
const LOAD = "bucket/LOAD";
...
// 액션 생성 함수
export function loadBucket(bucket_list){
return {type: LOAD, bucket_list};
}-> 파이어베이스랑 통신하는 함수 만들고, (미들웨어 만들어줄 차례)
import {
collection,
doc,
getDoc,
getDocs,
addDoc,
updateDoc,
deleteDoc,
} from "firebase/firestore";
import {db} from "../../firebase";
// 파이어베이스랑 통신하는 부분
export const loadBucketFB = () => {
//redux thunk는 이렇게 쓰이는구나로 이해하자!
return async function (dispatch) {
// 데이터를 가져와요!(파이어스토어에서 데이터 가져오기)
//getDocs: 데이터 전부 가져올 수 있음
//쓰기 어려운 데이터로 받기 때문에 쓰기 좋은 배열로 바꿔주기
const bucket_data = await getDocs(collection(db, "bucket"));
// 쓰기 좋은 배열로 바꿔주기 1.일단 빈 배열을 만든다.
let bucket_list = [];
// 2. 하나씩 우리가 쓸 수 있는 배열 데이터로 만들어줍시다!
//(b): ()안에 쓰는 이름은 b나 doc이나 그 외에 뭐든 아무거나 상관없다.
bucket_data.forEach((b) => {
// 콘솔로 확인해요!
// b.id: 수정, 삭제할 때 파이어베이스 id값 필요!
// b.data: 우리가 쓸 수 있는 데이터로 바꿔준다. 그리고 ...을 쓰면 기존 데이터도 같이 들어감
console.log(b.id, b.data());
//3. 리스트에 쓰기좋은 배열로 아이디랑 데이터값 주기
//push: array 내장함수 사용
bucket_list.push({ id: b.id, ...b.data() });
});
// 잘 만들어졌는 지 리스트도 확인해봐요! :)
console.log(bucket_list);
//store 안에 있는 데이터 수정
dispatch(loadBucket(bucket_list));
}
}-> 리듀서를 고치기!(화면에 데이터를 보이게 하기 위해)
case "bucket/LOAD": {
return {list: action.bucket_list}
}-> 그 후에는 불러다 쓰면 된다
// App.js
...
// 잠깐!! loadBucketFB를 import해오는 거 잊지말기!
React.useEffect( () => {
dispatch(loadBucketFB());
}, []);
...- create에 firestore 적용
순서는 항상 똑같을 것이다! 파이어베이스랑 통신 → 필요하다면 리듀서 고치고 → 불러다 쓰기
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
completed: false,
text: "new"
})-> 파이어베이스랑 통신하는 함수 만들고,
// 파이어베이스랑 통신하는 부분
//(bucket) : 추가하기 버튼 페이지에서 보면 버킷에 담긴 데이터 자체가 다 들어 있어서 파라미터를 버킷으로 넣어준다.
export const addBucketFB = (bucket) => {
return async function (dispatch) {
// 파이어스토어에 추가하기를 기다려요!
//맨 끝에 bucket: 내가 추가하고자 하는 데이터
const docRef = await addDoc(collection(db, "bucket"), bucket);
// 추가한 데이터 중 id를 가져와서 bucket_data를 만들어줬어요!
const bucket_data = { id: docRef.id, ...bucket };
// 그럼 이제 액션을 일으키자! (수정해달라고 요청하자!)
dispatch(createBucket(bucket_data));
}
}p.s. const docRef = await addDoc(collection(db, "bucket"), bucket);
: 무슨 데이터를 추가했는지를 docRef에 담는다. 근데 데이터를 가져오는게 아닌 참조하는 것이다. 그래서 console 확인 할 땐 console.log(docRef)가 아닌 console.log(getDoc(docRef)).data())로 해야한다.
-> 그후에는 불러다 쓰면 된다.
// App.js
...
// 잠깐!! addBucketFB를 import해오는 거 잊지말기!
const addBucketList = () => {
// addBucketFB()안에 새로 만들 bucket 딕셔너리를 넣어주면 된다.
dispatch(addBucketFB({ text: text.current.value, completed: false }));
};오늘은 파이어베이스에 저장 된 데이터를 리덕스 스토어에 넣는걸 도와주는 미들웨어를 공부했다.
미들웨어가 뭔지 이제 좀 감이 잡히고 파이어베이스라는 서버에서 데이터를 가져와 리덕스에 넣는게 바로 되는게 아니라는걸 알게됐다... 오늘 개인과제 제출날이었는데 수정하기 삭제하기 기능을 추가하지 못해 아쉽다.. 수정, 삭제하기 부분을 좀 더 공부해봐야겠지만 전체리스트 불러오고 추가하기까지는 과제완성해서 뿌듯하다.
