리덕스 적용

npm install --save redux

 

리덕스를 이용한다는 것은 store를 만들어서 그 store의 state를 바꾼다는 것이 리덕스의 핵심!

 

1. store를 만든다.

2. 그럼 state가 자동으로 생긴다.

3. reducer 라는 함수를 만들어서 store에 주입해준다.

 

1. createStore로 스토어를 만드는데 여기 전달인자로 reducer를 넣어주어야 한다.

여기서 reducer의 역할은?
dispatch에 의해서 action이 들어오게 되면 reducer가 그 action 값과 기존에 있었던 state의 값을 참조해서 새로운 state값을 만들어주는 것 (새로운 state 값을 리턴한다. 이 때, 기존 state를 immutable 하게 유지하기 위해서 Object.assign을 통해서 객체를 복사하는 작업이 꼭 필요하다.)

reducer 함수의 예시는 다음과 같다.

function reducer(state, action){
	// state가 정의되지 않은 초기 단계
	if(state === undefined) { 
    	// 초기 state 값을 다음으로 정의
    	return { color: 'yellow' }
    }
}

이렇게 만들어 준 reducer를 store에 담아준다.

let store = Redux.createStore(reducer);

이 때 store에 저장된 state 값을 가져오기 위해서는 getState 함수를 써야 한다.

store.getState(); // { color: 'yellow' }

 

 

위에서 본 reducer 함수는 초기 state 값을 설정하기만 했다.

그렇다면 state를 변경하기 위해서는 어떻게 해야할까?

action 함수를 사용할 수 있다.

 

action을 dispatch에게 제출하면 dispatch가 reducer를 호출하는데 그 때 이전의 state값과 action의 값을 동시에 준다.

그러면 우리가 작성할 reducer 함수가 그것을 분석해서 state의 최종값을 리턴해주면 된다.

 

 

dispatch는 다음과 같이 html의 onclick 함수에 할당해준다. 여기서 type은 꼭 지정해주어야 한다!

<input type="button" value="fire" onclick=
	"store.dispatch({type: "CHANGE_COLOR", color:"red"})"
/>

그리고 이 dispatch는 reducer를 호출하도록 약속이 되어 있다.

reducer의 첫번째 인자로는 이전의 state값을 주고 두번째 인자로 dispatch의 첫번째 인자로 전달된 action을 준다.

 

 

 

자 그러면 state 값이 바뀌면 render가 그것을 통보받아서 화면에 그려줄 수 있게 만들어야 한다.

 

state값이 바뀔때마다 (=dispatch가 될 때마다) render가 실행되게 하려면 subscribe에 render를 등록하면 된다.

store.subscribe(render) // 여기서 render은 UI를 그려주는 함수