[Redux] Redux의 장점

0. 배경

위의 사진처럼 각각의 버튼을 누를 시 3개의 색이 변하는 코드를 짜고 싶다.

 

 

1. Redux 사용 안 할 시

 

 <script>
        function red() {
            document.querySelector('#red').innerHTML = `
            <div class="container" id="component_red">
                <h1>red</h1>
                <input type="button" value="fire" onclick=" 
                document.querySelector('#component_red').style.backgroundColor='red';
                document.querySelector('#component_blue').style.backgroundColor='red';
                document.querySelector('#component_green').style.backgroundColor='red';
                ">
            </div>
            `

        };

        function blue() {
            document.querySelector('#blue').innerHTML = `
            <div class="container" id="component_blue">
                <h1>blue</h1>
                <input type="button" value="fire" onclick=" 
                document.querySelector('#component_blue').style.backgroundColor='blue';
                document.querySelector('#component_red').style.backgroundColor='blue';
                document.querySelector('#component_green').style.backgroundColor='blue';
                ">
            </div>
            `
        };
        function green() {
            document.querySelector('#green').innerHTML = `
                <div class="container" id="component_green">
                    <h1>green</h1>
                    <input type="button" value="fire" onclick=" 
                    document.querySelector('#component_blue').style.backgroundColor='green';
                    document.querySelector('#component_red').style.backgroundColor='green';
                    document.querySelector('#component_green').style.backgroundColor='green';
                    ">
                </div>
                `

        };
        red();
        blue();
        green();
    </script>

-부품이 생길 때마다 각각의 부품에 코드가 추가되고 점점 기하급수적으로 늘어난다.

 

 

 

 

 

 

2. Redux 사용

 <script>
        function reducer(state, action){
            if(state === undefined){
                return {color : 'yellow'}
            }
            if(action.type==='CHANGE_COLOR'){
                newState=Object.assign({}, state, {color : action.color});
                
            }
            return newState;
        }
        var store=Redux.createStore(reducer);
        
        function red() {
            var state=store.getState();
            document.querySelector('#red').innerHTML = `
            <div class="container" id="component_red" style="background-color:${state.color}">
                <h1>red</h1>
                <input type="button" value="fire" onclick=" 
                store.dispatch({type : 'CHANGE_COLOR', color:'red'});
                ">
            </div>
            `
        };

        function blue() {
            var state=store.getState();
            document.querySelector('#blue').innerHTML = `
            <div class="container" id="component_blue" style="background-color:${state.color}">
                <h1>blue</h1>
                <input type="button" value="fire" onclick=" 
                store.dispatch({type : 'CHANGE_COLOR', color:'blue'});
                ">
            </div>
            `
        };

        function green() {
            var state=store.getState();
            document.querySelector('#green').innerHTML = `
            <div class="container" id="component_blue" style="background-color:${state.color}">
                <h1>green</h1>
                <input type="button" value="fire" onclick=" 
                store.dispatch({type : 'CHANGE_COLOR', color:'green'});
                ">
            </div>
            `
        };
        red();
        blue();
        green();
        
        store.subscribe(red);
        store.subscribe(blue);
        store.subscribe(green);
       
        
      
    </script>

이렇게 Redux을 이용해서 독립적인 코드를 작성이 가능하다. 부품수가 늘어도 앞의 코드처럼 코드 수가 기하급수적으로 늘지 않는다.

 

 

(1)

function reducer(state, action){
            if(state === undefined){
                return {color : 'yellow'}
            }
            if(action.type==='CHANGE_COLOR'){
                newState=Object.assign({}, state, {color : action.color});
                
            }
            return newState;
        }

-redux을 만들기 위해선 reducer함수가 필요하다.

초기단계에서는 yellow를 리턴하고 그후 type변경시 그에 맞는 값을 리턴한다.

 

 

(2)

var store=Redux.createStore(reducer);

만든 reducer함수를 기반으로 store를 생성한다.

 

 

(3)

 var state=store.getState();

getState를 통해서 state를 갖고온다.

 

 

(4)

store.dispatch({type : 'CHANGE_COLOR', color:'red'});

store.subscribe(red);

dispatch : reducer를 호출해서 state값을 변경하고,

subscribe : subscribe를 통해서 변경마다 render를해서 색을 변경해줌