기초: reducer와 action을 이용해서 새로운 state 값 만들기

with-redux.html

@@ -16,9 +16,16 @@
     <div id="red"></div>
     <script>
       function reducer(state, action) {
+        console.log(state, action);
         if (state === undefined) {
           return { color: "yellow" };
         }
+
+        let newState;
+        if (action.type === "CHANGE_COLOR") {
+          newState = Object.assign({}, state, { color: "red" });
+        }
+        return newState;
       }
       const store = Redux.createStore(reducer);
 
@@ -28,9 +35,7 @@
           <div class="container" id="component_red" style="background-color: ${state.color}">
             <h1>Red</h1>
             <input type="button" value="fire" onclick="
-              document.querySelector('#component_red').style.backgroundColor = 'red';
-              document.querySelector('#component_green').style.backgroundColor = 'red';
-              document.querySelector('#component_blue').style.backgroundColor = 'red';
+              store.dispatch({type: 'CHANGE_COLOR', color: 'red'})
             ">
           </div>
         `;