dispatch?
일전의 렌더를 참조해서 ui를 만드는 이미지를 머릿속에서 그려봄.
사용자가 어떻게 글을 쓸 수 있을까 ?
submit 버튼을 누르면 추가목록이 갱신되는것을 예상 할 수 있다.
submit 버튼은 아래와같은 이벤트가 걸려있음.
<form onsubmit ="
// ...
store.dispatch({type:'create', payload:{title:title, desc:desc}});
">액션이 디스패치에 전달이됨. 디스패치는
리듀서를 호출하여 스테이트값을 바꿈 서브스크라이브를 이용해서 렌더함수를 호출
디스패치가 리듀서를 어떻게 다룰까 ?
디스패치가 리듀서를 호출할때 두개의 값을 전달함
현재의 스테이트값을 전달. 또하나는 액션 데이터.
{type:'create', payload:{title:title, desc:desc}
이것을 전달함 코드로 본다면, 아래 사진과같음.
파라미터가 스테이트와 액션 디스패치를 통해 보낸 두개의 값이 공급되어 디스패치에 의해
이 함수가 호출됨. store에서 액션의 타입이 크리에이트니까 리듀서 안에 이렇게 액션에 대응하는
리듀서 코드가 지금 보고있는 현재 코드이다.
여기서 있는 코드를 가공해서 리턴을 함. state의 새로운 값이됨. 리듀서는 스테이트를 입력값으로 받고 새로운 스테이트값을 받고 만들어 내서 주는 '가공자'가 됨.
용어들에 익숙해지는 정도로 만족..
새로운 스테이트값이된다. 새로운스테이트값을 변경이됨. 렌더가 다시 호출 해야된단 말임.
그것을 디스패치가 서버스크라이브에 등록된 독자들을 다 호출이됨. 어떤일이 일어날까
이전에 일어났던일이 또 발생함.
핵심
렌더가 화면을 갱신해주면 새로운 스테이트에 맞게 ui가 변경 이것이 리덕스가 동작하는 전체적인 흐름
요소 이런것들이다. 핵심은 스테이트 그리고 스테이트 기반으로 렌더가 ui를 그려준다.
또하나는 중간에 스토어에 스테이트 직접 접속하는게 금지되어있기에 겟스테이트를 가져오고
디스패치를 통해 값을 변경 서브스크라이브를 이용 값이 변경될때 구동될 함수를 등록해준다.
그리고 마지막으로 리듀서를 통해 스테이트값을 변경해줌. 가장 어려워 해야할 부분이 바로 리듀스이다.
