Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- JavaScript
- 인풋태그 엔터
- git
- 향해99
- react portal
- NVM
- Passed by Value
- 원티드인턴십
- 원티트 프리온보딩인턴십 1주차
- 원티드프리온보딩
- CPU와 GPU의 차이점
- Mac OS NVM
- Til
- input error
- 식별자란
- Client-Side Navigation
- JS
- Redux
- 광고지구
- Node
- toast err
- jsEvent Loop
- 회고록
- 유령 의존성
- 알고리즘
- NextJs
- 프로젝트
- CloudFront 무효화
- react
- next/link
Archives
- Today
- Total
SUIN
[Redux] 리덕스에서 FireStore 데이터 Create (CRUD) 본문
728x90
Create 순서
1. 액션 타입만들기
// ---- Actions ----
const CREATE = "card/CREATE";
2. 액션 생성함수 만들기
// ----- Action Creators ----
export function createCard(card) {
console.log("액션을 생성할거야!");
return { type: CREATE, card };
}
3. 파이어베이스와 통신하는 미들웨어 만들기
import { db } from "../../firebase";
import {
collection,
doc,
getDoc,
getDocs,
addDoc,
updateDoc,
deleteDoc,
} from "firebase/firestore";
// 추가
export const createCardFB = (card) => {
return async function (dispatch) {
// 어느컬랙션에 넣어줄꺼니 (어떤 파이어스토어,컬랙션 이름,받아오는 데이터)
//card : addpage에서 버튼을 클릭했을때 받아오는 dispatch 내용
const docRef = await addDoc(collection(db, "card"), card);
// data는 doc의 참조값이다 getDoc 으로 데이터 확인
// console.log(docRef.id, docRef.data());
console.log((await getDoc(docRef)).data());
// 리덕스에 넣어주기
const _card = await getDoc(docRef);
const card_data = { id: _card.id, ..._card.data() };
console.log(card_data);
// 추가하기
dispatch(createCard(card_data));
};
};
4. 디스패치 값 값 넘겨주기
import { useDispatch } from "react-redux";
import { loadCardFB } from "../redux/modules/Card";
const dispatch = useDispatch();
const addCardList = () => {
dispatch(
createCardFB({
word: word.current.value,
explanation: explanation.current.value,
example: example.current.value,
})
);
history.goBack();
};
5. 리듀서 case 추가하기
// ---- Reducer -----
export default function reducer(state = initialState, action = {}) {
case "card/CREATE": {
console.log("이제 값을 바꿀거야!");
let new_card_list = [...state.card, action.card];
return { card: new_card_list };
}
default:
return state;
}
}
'Redux' 카테고리의 다른 글
[Redux] 리덕스에서 FireStore 데이터 Read (CRUD) (0) | 2021.11.24 |
---|---|
[Redux] 리덕스의 상태관리 흐름도 (0) | 2021.11.24 |
[Redux] redux-thunk 설치하고 Store 연결해보기 (0) | 2021.11.24 |
[Redux] MY DICTIONARY(내 사전) 만들기 (0) | 2021.11.23 |
[Redux] 리덕스란? (0) | 2021.11.23 |