#1.1 Store and Reducer
import { createStore } from "redux";
..
const countStore = createStore(reducer);
- createStore로 data를 넣을 장소를 생성
- state(상태) : 앱에서 바뀌는 data
- createStore에는 reducer를 인자로 넣어야하는데, 이때 reducer는 무조건 함수여야함
- reducer : data를 수정하는 함수
- reducer에서 return 하는 것이 countStore에 저장됨
- countStore.getState를 통해 reducer에서 리턴한 값을 가져올 수 있음
#1.2 Actions
- redux에서 함수를 부를 때 쓰는 두 번째 파라미터(인자)
- action을 통해서 reducer와 소통함
- action은 object여야함
(ex) {type: "ADD"})
- countStore.dispatch(액션)를 통해서 reducer에게 action을 보낼 수 있음
#1.3 Subscriptions
- countStore을 console.log로 보면 subscriptions라는 함수를 볼 수 있음
- store안에 있는 변화들을 알 수 있게 해줌
- countStore.subscribe(함수)
-> countStore에 변화가 생기면 즉, store에 변화가 생기면 함수를 실행함.
#1.4 Recap Refactor
(전체 순서)
1. 현재 createStore(CountModifier)을 통해서 CountModifier 이라는 store(함수)을 만들고 그 걸 countStore이라는 변수에 저장함.
2. Add 버튼을 클릭하면 add.eventListener를 통해 handleAdd 함수가 실행됨.
3. handleAdd 함수에서 countStore.dispatch()를 이용해 countStore에 {type: "ADD"} 라는 action을 CountModifier에 보냄
4. CountModifier에서는 현재 default count가 0인 상태에서 {type: "ADD"} 인 action을 보고 count + 1 을 리턴함. (즉 count = 1이 되고 return 1;)
5. 2에서 눌린 버튼으로 인한 변화가 감지되고 countStore.subscribe(onChange) 함수를 통해 onChange 함수가 실행됨.
6. onChange 함수에서 countStore.getState()를 통해 return 값을 가져오고(4에서 return 1;) 그걸 number.innerText로 설정하여 html 상에서 0을 1로 변화시킴
- 대부분 reducer안에서는 switch 문을 사용
# 결과
Add를 누르면 숫자가 1씩 올라가고, Minus를 누르면 숫자가 1씩 내려간다.