Redux

state를 getState, render -> ui,변경시 distatch 가 state, action 을 받은 reducer가 new state를 return 하면 subscribe되어있는 render를 호출, new ui가 만들어진다.

state 와 render의 관계

store를 만든후 인자 reudcer 실행 (redux)를 만드는일

render란 ui를 만들어주는 우리가 짠 코드
state를 함부로 가져가지못하게 dispatch subscribe getState 가 지키는중

render가 getstate를 통해서 state를 가져와서 ui해준다.

state값이 변경될떄마다 render함수를 호출되어 ui가 새롭게 갱신된다면? -render만 잘만들어도되는데..
=> subscribe 사용

action과 reducer

dispatch는 2가지 일을한다.

• reducer를 호출해서 state의 값을 바꾼다. 작업이 끝나면 subscribe를 이용해서 render함수를 호출 => 화면이 갱신된다.

---

dispacth가 reducer를 호출할떄 두개의 값을 전달한다.

• 현재의 state값 전달
• action 데이터 객체를 전달한다.

return해준값은 state에 새로운 값이 된다.
reducer는 state값을 받고 actcion을 창조해서 새로운 state값을 return해주는 state를 가공하는 가공자이다.

state값이 변경됬으면 render가 다시호출되야한다.

dispatch가 subscribe에 등록되있는 구독자들을 다 호출해준다.

그러면 render가 호출이 되면서 getstate -> state -> getstate -> render -> 새로운 state에 맞게 UI갱신

정리

1. state를 중심으로 render를 통해 화면에 그려준다

2. store에 있는 state에 직접 접속하는게 금지되어있기 떄문에 getstate를 통해 값을 가져오고 dispatch를 통해 값을 변경시키고 subscribe를 통해 값이 변경됬을떄 구동될 함수들을 등록해준다.

3. reducer를 통해서 state값을 변경한다

state를 getState, render -> ui,변경시 distatch 가 state, action 을 받은 reducer가 new state를 return 하면 subscribe되어있는 render를 호출, new ui가 만들어진다.

Redux가 좋은 가장 중요한 이유

1. 자기꺼 바꿀 로직

2. 상대꺼

3. 상대꺼

4. 상대꺼

1. 상태가 바뀌었을떄 바뀌었다고 알려줄 로직

2. 상태가 변경됬을때 자기자신이 변화시켜야되는 로직

정리

Redux의 큰 장점 - 중앙집권적인 전역 상태관리 툴을 통한 로직 간소화 + Time Traveling 을 통한 좀 더 쉬운 디버깅

Store 생성

reducer와 action을 이용해서 새로운 state값 만들기

핵심

reducer 함수가 하는 역활

• store에 state값을 변경해준다 -> action의 값과 이전의 state 값을 이용해서 새로운 state값을 리턴해주면 그 리턴된 값이 새로운 state값이 된다.

• return 값은 원본을 바꾸는것이아니라 이전의 값을 복제한 결과를 리턴해야지만 리덕스를 사용하는 여러가지 효용들을 최대한으로 활용할수있다,

state의 변화를 UI에 반영하기

state값이 바뀔떄마다(dispatch를 할떄마다) red(함수)를 호출하려면 subscribe에 render를 등록해놓기 dispatch가 state값을 받고 난 다음에