Redux - createStore / dispatch / subscribe

Store 생성 : Redux.createStore()

function reducer(state, action) {
    if(state == undefined) {
        return {color: 'yellow'}
    }
}
var store = Redux.createStore();
console.log(store.getState());
// {color: 'yellow'} 출력

• store 생성에는 reducer 등록이 필요하다.
• 이 때 store에 아무런 값이 없을 때는 state값이 undefined이기 때문에 초기화를 해주어야 한다.
• getState로 state를 불러올 수 있다.

---

Reducer with action : store.dispatch()

store.dispatch({type:'CHANGE_COLOR', color:'red'})
function reducer(state, action) {
    if(state == undefined) {
        return {color: 'yellow'}
    }
    var newState;
    if (action.type === 'CHANGE_COLOR'{
        newState = Object.assign({}, state, {color: action.colo});
    }
    return newState;
}
var store = Redux.createStore();
console.log(store.getState());

• dispatch를 수행하면 reducer 함수를 호출하도록 설정되어 있다.
• 이 때 기존의 state값과 dispatch를 통해 전달된 action값을 인자로 준다.
• reducer의 리턴값이 새로운 state가 된다.
• 이 때 기존 state에 변경을 가하지 않도록 주의한다. 그럼 Redux의 장점 중 하나인 UNDO, REDO 등의 상태 관리 기능을 사용할 수 없게 된다. (따라서 Object.assign()을 활용한다.)

---

state 변화에 따라 UI 반영하기 : subscribe()

store.subscribe(render);

• state값이 변경될 때마다 render함수가 호출된다.