SUIN

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 cr..

리덕스에 FireStore 데이터를 넣어보자 Road 순서 1. 액션 타입만들기 // ---- Actions ---- const LOAD = "card/LOAD"; 2. 액션 생성함수 만들기 // ----- Action Creators ---- // loadCard 모든 카드의 리스트를 다 가지고 있어야 합니다 export function loadCard(card_list){ return { type: LOAD, card_list }; } 3. 파이어베이스와 통신하는 미들웨어 만들기 import { db } from "../../firebase"; import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, } from "firebas..

Redux 상태관리 흐름도 스토어 - 데이터 저장하는곳 리듀서 - 데이터를 실제로 수정되는 공간 흐름도 순서 A Component 에서 Store에 있는 구독중 A Component 에서 Action dispatch Reducer 에서 새로운 상태 값을 만든다(실제 data 수정이 일어난다) 변경된 새로운 상태값은 Store 저장된다 Store에서 구독중인 Component에 수정된 데이터를 넘겨준다(알려준다) A Component re-rendering DOM에 변경된 data 확인

비동기 통신 서버에서 데이터를 가지고 오는 것은 우리가 바로 알 수없고 요청이 들어가면 응답을 해줄 때까지 작업이 끝났는지 알 수 없다 즉 우리가 파이어스토어에서 데이터를 가지고 오는 것은 비동기로 데이터를 가지고 오는 것이다 미들웨어 리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구 먼저 설치해야합니다 yarn add redux-thunk 액션 디스패치와 리듀서 사이에 중간다리 역할을 한다. 액션이 일어남-> 미들웨어에서 비돈기 통신 -> 리듀서에서 데이터 수정 redux-thunk는 뭐하는 미들웨어일까? 객체대신에 함수를 생성하는 액션 생성 함수를 작성할 수 있다 액션 생성 함수 - 액션 객체 반환(딕셔너리{}) thunk- 함수리턴 -> 특정 액션이 실제로 수행되기 전에 조건을 준다거나 사전..

- 테스트 영상 - Redux >modules> Card.js initialState => state 초기값 생성 Action Creators => Create Reducer=> new_card_list에 state값 추가 // card.js // ---- Actions ---- const CREATE = "card/CREATE"; //---- 초기값 ----- const initialState = { card: [ { word: "Lorem", explanation: "Ipsum is simply dummy ", example: "It is a long established fact that a reader ", }, { word: "Lorem", explanation: "Ipsum is simply ..

Redux 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나이다. 공식 사이트 : https://ko.redux.js.org/introduction/getting-started/ Redux 용어 더보기 State, Action, Action Creator, Reducer, Store, Dispatch, Subscribe, Selector State 리덕스에서는 저장하고 있는 상태값을 State라고 한다. 딕셔너리 형태({[key]: value})형태로 보관할 수 있다 Action(액션) 상태에 변화가 필요할 때 발생하는 것 {type: 'CHANGE_STATE', data: {...}} Action Creator (액션 생성 함수) 액션 생성 함수(액션을 만들기 위해 사용) 화살표 함..