{
type: "TOGGLE_VALUE"
}
const redux = require('redux');
/*
! Reducer
순수 함수여야 한다. //! 동일한 입력, 동일한 입력 값을 넣으면 항상 정확히 같은 출력이 산출, Side effect XX
리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어내야 함
리덕스 라이브러리에 의해 호출
항상 2개의 입력, 즉 두 개의 파라미터 받는다. //! (기존의 상태, 발송된 액션)
어떤 출력(새로운 상태 객체)을 리턴해야만 한다.
*/
const counterReducer = (state = { counter: 0 }, action) => {
if (action.type === 'increment') {
return {
counter: state.counter + 1,
};
}
if (action.type === 'decrement') {
return {
counter: state.counter - 1,
};
}
return state;
};
/*
! Store
저장소는 데이터를 관리해야 한다.
관리하는 데이터는 리듀서 함수에 의해 결정된다.
=> 리듀서 함수가 새로운 상태의 스냅샷을 생성하기 때문
*/
const store = redux.createStore(counterReducer); //! 실행이 아닌 포인터로서 가리킨다.
/*
! Subscribe
어떠한 파라미터도 받지 않는다.
함수 안에서 저장소에서 getState()를 통해 호출할 수 있다.
getState()는 생성된 저장소에서 사용할 수 있는 메소드, 업데이트 된 후에 최신 상태의 스냅샷을 제공한다.
리덕스가 이 구독 함수를 인식하도록 하고 상태가 변경될 때마다 이 함수를 실행하라고 알려줘야 된다.
=> subscribe() 메소드를 호출
*/
const counterSubscriber = () => {
const latestState = store.getState();
console.log(latestState);
};
store.subscribe(counterSubscriber); //! 실행이 아닌 포인터로서 가리킨다.
/*
! dispatch
dispatch는 액션을 발송하는 메서드
액션은 자바스크립트의 객체
{type: '고유한 문자열을 사용하세요'}
*/
store.dispatch({ type: 'increment' });
store.dispatch({ type: 'decrement' });