[생활코딩] 2. 리덕스 여행의 지도 (소개, state와 render의 관계, action과 reducer)

2-1. 리덕스 여행의 지도: 소개

• 최종 목표: 읽기, 생성, 삭제 구현된 웹 애플리케이션을 html, css, redux로 구현

 

2-2. 리덕스 여행의 지도 : state와 render의 관계

• redux의 핵심 : store (정보가 저장되는 곳)
• store > state : 실제 정보가 저장. state에 직접 접속은 불가, 금지 => 누군가를 통해서만 가능
• reducer 함수: store를 생성 시, redux함수를 생성하여 공급해야 함
• render : redux와 상관없는 우리의 코드 (store 밖에 존재), UI를 만들어주는 역할
• dispatch, subscribe, getState함수: 우리와 함께 일 할 함수
• getState: state값 가져오기
• render -> getState -> state -> getState (값 가져오기) -> render => UI 생성
• subscribe: state가 바뀔 때마다 갱신되도록 render함수를 등록하는 것

 

2-3. 리덕스 여행의 지도 : action과 reducer

• 사용자가 입력 가능, submit 버튼 -> 추가된 목록 갱신
• submit 하기: type이 create인 객체(action) 전송
• action -> dispatch로 전송
• dispatch의 역할: reducer 호출하여 state 값 변경 -> subscribe를 이용해서 render 함수 호출 -> 화면 갱신
• dispatch가 reducer 호출: 현재의 state값과 action에 있는 객체 전달
• reducer: state를 입력값으로 받고 action을 참조해서 새로운 state값을 생성해 return -> state 가공자
• 즉, 새로운 state 값 == reducer가 return 하는 값 (state 값 변경)
• state 변경 후, render 다시 실행 -> dispatch가 subscribe에 등록된 구독자들을 다 호출 -> render가 호출됨 -> getState -> state에서 값 가져옴 -> getState -> render -> 새로운 state에 맞게 UI 변경

 

출처: https://www.youtube.com/watch?v=N9PT9iNTZAE&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=2