From f2e8c17e8f3d21a5a6222860aeb8b32efbff6889 Mon Sep 17 00:00:00 2001
From: Kim Minjun <swmjoon@gmail.com>
Date: Thu, 14 Sep 2023 11:30:17 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EC=B4=88:=20reducer=E1=84=8B=E1=85=AA?=
 =?UTF-8?q?=20action=E1=84=8B=E1=85=B3=E1=86=AF=20=E1=84=8B=E1=85=B5?=
 =?UTF-8?q?=E1=84=8B=E1=85=AD=E1=86=BC=E1=84=92=E1=85=A2=E1=84=89=E1=85=A5?=
 =?UTF-8?q?=20=E1=84=89=E1=85=A2=E1=84=85=E1=85=A9=E1=84=8B=E1=85=AE?=
 =?UTF-8?q?=E1=86=AB=20state=20=E1=84=80=E1=85=A1=E1=86=B9=20=E1=84=86?=
 =?UTF-8?q?=E1=85=A1=E1=86=AB=E1=84=83=E1=85=B3=E1=86=AF=E1=84=80=E1=85=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 with-redux.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/with-redux.html b/with-redux.html
index 853896c..b0d686e 100644
--- a/with-redux.html
+++ b/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>
         `;