# 241 [udemy React 완벽 가이드 노트] Redux 기능

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

  return state;
};

Reducer 함수를 위와 같이 작성한다면 초기 counter 값이 1이 되지 않을 것이다. 

action.type이 increment일 때만 1을 증가시킬 것이기 때문이다. 

초기에는 변경되지 않은 default state를 return 하게 될 것이다.  

 

store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });

그리고 action을 이 두가지를 주게 되면,

reducer function에 의해 store의 state가 변경되고 

 

store.subscribe(counterSubscriber)

로 인해서 

state가 변경된 것을 감지해 

counterSubscriber를 실행시켜 준다. 

 

그래서 state가 변경될 때마다 counterSubscriber안의 함수가 실행되어 

바뀐 state를 console.log된 것이다. 

 

 

그로 인해 redux-demo.js 파일을 실행시키면

위와 같이 나오게 된다.  

 

 

 

리덕스는 리액트에만 국한된 것이 아니다. 
어떤 자바스크립트 프로젝트에서도 사용 가능하다.
다른 프로그래밍 언어에서도 실행 가능하다.

 

다음 강의에서 리액트에서 리덕스를 실행시켜보자.