Redux(2) - 핵심 리덕스 개념

const redux = require('redux');

const counterReducer = (state= {counter: 0} , action) => {
	return {
    	counter: state.counter + 1
    };
};

const store = redux.createStore(counterReducer);

const.log(store.getState());

const counterSubscriber = () => {
	const latestState = store.getState();
  	console.log(latestState);
};

store.subscribe(counterSubscriber);

store.dispatch({ type: 'increment' });

createStore() : 임포트한 리덕스 객체를 이용해서 저장소를 만들 수 있다. 그 안에 리듀서 함수는 넣는데 그 이유는 어떤 리듀서가 그 저장소를 변경하는지 저장소가 알아야하기 때문이다.

counterReducer() : 저장소는 데이터를 관리해야한다. 그리고 그게 관리하는 데이터는 결국 리듀서 함수에 의해 결정된다. 리듀서가 새로운 상태 스냅샷을 생성하기 때문. 리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어내야한다. 리듀서 함수는 표준 자바스크립트 함수지만, 리덕스 라이브러리에 의해 호출된다.
항상 2개의 입력, 즉 2개의 파라미터를 받는다. 바로 기존의 상태와 발송된 액션(Inputs : Old State + Dispatched Action)이다. 그리고 이 리듀서 함수는 항상 새로운 상태 객체를 리턴해야만 한다.(Output : New State Object). 그리고 첫번째 파라미터에 state= {counter: 0}를 해놓은 이유는 저장소가 초기화될때 리덕스가 이 리듀서를 처음으로 실행하기 때문이다. 이것이 없으면 state 초기값을 몰라 에러가 발생한다.

getState() : createStore()로 생성된 저장소에서 사용할 수 있는 메서드이다. 그리고 업데이트 된 후에 최신 상태 스탭샷을 제공한다. 그럼 이 counterSubscriber 함수는 상태 변경될 때마다 트리거 된다. 그리고 그게 트리거되면 getState()메서드로 변경된 후의 최신 상태를 받게 된다.

store.subsribe() : 리덕스가 데이터와 저장소가 변경될 때마다 그걸 실행해줄 것이다.