const redux = require("redux");서드파티 패키지를 가져오기 위해서 위처럼 사용
const store = redux.createStore();- 스토어를 만들고 상수에 저장
- 저장소는 데이터를 관리해야 함 -> 리듀서 함수에 의해 결정 (리듀서 함수가 새로운 상태 스냅샷을 생성할 것이기 때문에)
- 리듀서는 액션이 도착할 때마다 새로운 상태를 내뱉어야 함
- 초기실행 시 초기 상태를 뱉어냄
const counterReducer = (state = { counter: 0 }, action) => {
return {
counter: state.counter + 1,
};
//기존의 상태를 바꿀 새로운 스테이트를 반환
};- state : 기존상태, counter : 저장된 기존의 값
- 이후 createStore에 넘겨주자
- 리듀서는 항상 2개의 파라미터를 받는다 (기존의 상태 / 액션) -> 어떤 출력을 반환해야 한다 (새로운 상태 객체)
- 그러므로 리듀서 함수는 순수한 함수여야 한다 (함수 안에는 부수적인 효과도 없어야 한다)
const store = redux.createStore(counterReducer);- 어떤 리듀서가 그 저장소를 변경하는지 저장소가 알아야 하기 때문
- 저장소를 구독할 누군가 필요 + 발송할 수 있는 액션도 필요
const counterSubscriber = () => {
store.getState();
//getState()는 createStore()로 저장된 저장소에서 사용할 수 있는 메서드
//구독함수는 상태가 변경될 때마다 트리거 된다
//트리거 되면 getState() 메소드로 변경돈 후의 최신 상태를 받을 수 있음
const latestState = store.getState();
console.log(latestState);
};- 이제 리덕스가 이 구독함수를 인식 + 상태가 변경될 때마다 실행하라고 알려줘야함
저장소 -> subscribe 메소드 호출
store.subscribe(counterSubscriber);함수를 실행하지 않고 가르키기만 한다
리듀서와 구독함수를 모두 리덕스가 실행하기 때문
- 해당 상태로 실행하게 되면 Undefined가 출력 (counter) -> 기존 상태가 없기 때문에 -> state에 기본값을 주어야함, 안주면 가정된다
- state 기본값은 설정 후 다음에 실행될 때 기존 상태가 있게 되므로 기본값은 사용되지 않는다
- state = {counter : 0}
- 변경 후 실행 -> 실행은 되지만 출력된 값이 없다 <- 액션 발송을 안했기 때문이다
store.dispatch({ type: "increment" });- dispatch() 액션 발송 메소드
- 액션 = 자바스크립트 객체 -> 식별자 역할을 하는 타입 프로퍼티를 가진
고유한 문자열 사용!
