리덕스 생활코딩/John Ann의 강의를 참고해서 작성함

---

리덕스 dependencies

생활코딩

 

Data change 발생 시

리엑트은 소문 

•  컴포넌트로만 구성, individual compnt에서 data change 발생시, 주변으로 전파? 시킴

          1.  렌더함수 호출로 필요하지 않아도 모두 전파되면서 performance 떨어짐

1. 업뎃을 위해서 indiv cmptnt 연결되어야함! Props & event 로 연결됨

2. 규모 커지면 복잡해짐-------------->

            

리덕스: 정보를 중앙화시킴

• 리액트의 1번 단점redux 도 가지고 있음(중앙전파) → 라이브러리로 극복가능함

 

Predictable state container for JS apps

JS 앱을 위한 예측가능한 상태 저장소

 

리덕스 특징

 1. Single Source → 하나의 객체 (app의 복잡성 낮춰줌) 로 관리

     단 하나의 State 유지함 ={}

 

 2.데이터 가져가거나 변경  매우 strict

    

    데이터 외부에서 직접 제어 X 

     의도치 않은 state 변경 하지 않기 위해서

    데이터 change → 업데이트 해줌!

    원본 수정이 아니라 원복 복제를 통해서  change undo, redo 쉬움

    이전 상태의 app 상태 찾기도 쉬움

---

https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=4

2.1 전체 동작 & 흐름파악

 

 2.2 State 와 render 의 관계

  리덕스는 저장하는 곳.

  State만들기 위해서 reducer를 매개로 씀

  State 직접 접속 X  접속을 위해서 3가지 함수 →

 

 

get State() 가져옴

 

렌더 → UI역할을 하는, 우리가 짜는 코드,

           State 데이터를 참조해서 UI를 만듦

       

Subscribe() 구독

     렌더함수를 잘 만들면 상태 변화 업데이트된(state 값 받아와서 업데이트하는)

            UI만들 수 있음 → subscribe 

       형식 : store.subscribe(render);

3.Action의 예

Submit 버튼을 누르면,

Action이 dispatch 에 전달됨

Dispatch 역할 

1. 리듀서 호출해서 state 값 바꿈

2. 1이 끝나면 subscribe 이용해서 렌더함수로 리턴해줌(--> 화면갱신됨)

Dispatch가 리듀서를 호출할떄(1번) 매개변수 2개 필요! ㅐㅑ(state, action)

 리듀서는:   현재의 값 state (입력값)으로 action 을 참조해서

새로운 data (리턴값 -->새로운 state값) 만들어냄!

---

리덕스

John Ann

리덕스는 한방향으로만 흐름unidirectional

 

1.액션 = 무엇이 일어났는지 설명하는 객체

 

2.리듀서 -액션을 통해서 뭐가 변하는지 설명해주는 객체 

3.스토어 → 

 Dependencies

리덕스미들웨어

리덕스-thunnk 리덕스가  함수 잘 사용할 수 있게 해줌 

리덕스-promise 리덕스가 프로미스 잘 사용할 수 있게 해줌