[Redux] Redux 동작 원리

• store

• 정보가 저장되는 곳

• state

• 실제 정보가 저장되는 곳

• state에 직접 접속할 수 없음

• reducer

• state를 입력값으로 받고 action을 참조해서 새로운 state값으로 리턴해주는 가공자의 역할

    function reducer(state, action){
        var newState;
        if(action.type === 'CREATE'){
            var newMaxId = state.max_id + 1;
            var newContents = state.contents.concat();
            newContents.push({id:newMaxId, title: action.title, desc: action.desc})
            newState = Object.assign({}, state, {
                max_id:newMaxId,
                contents:newContents,
                mode:'read'
            })
        } 
        return newState;
    }

• state에 접근하기 위한 요소

• dispatch

• 현재 state값과 action을 통해 전해지는 정보를 redux와 subscribe에 전해줌

• redux에 전해진 값

• state값을 변경함

• subscribe에 전해진 값

• render에 새로운 state값을 전달해서 새로운 값을 사용하여 ui를 만들게 함

• subscribe

• render함수를 등록해놓으면 state값이 바뀔 때마다 render함수가 호출되면서 ui가 새롭게 갱신됨

    store.subscribe(render);

• getState

• render

• 개발자가 짤 코드(html 형식)

• state의 값을 참조해서 ui를 만듦

    function render(){
        var state = store.getState();
        //...
        document.querySelector('#app').innerHTML = `
            <h1>WEV</h1>
            ...
        `;
    }

 

 

 

• 참고
  • 생활코딩강의(redux)
    • https://www.opentutorials.org/module/4078/24935