7.4. 실전 Redux - action을 dispatch를 통해서 전달하기

main.html

@@ -23,14 +23,20 @@ <h1>WEB</h1>
     var liTags = '';
     while(i<state.contents.length){
         liTags = liTags + `
-            <li>
-                <a href="${state.contents[i].id}">${state.contents[i].title}</a>
-            </li>`;
+        <li>
+            <a onclick="
+                event.preventDefault();
+                var action = {type:'SELECT', id:${state.contents[i].id}}
+                store.dispatch(action);
+            " href="${state.contents[i].id}">
+                ${state.contents[i].title}
+            </a>
+        </li>`;
         i = i + 1;
     }
     document.querySelector('#toc').innerHTML = `
     <nav>
-        <ol>${liTags}</ol>
+        <ol>${liTags}</ ol>
     </nav>
     `;
 }
@@ -53,12 +59,19 @@ <h2>HTML</h2>
 function reducer(state, action){
     if(state === undefined){
         return {
+            selcted_id:null,
             contents:[
                 {id:1,title:'HTML',desc:'HTML is ..'},
                 {id:2,title:'CSS', desc:'CSS is ..'}
             ]
         }
     }
+    var newState;
+    if(action.type === 'SELECT'){
+        newState = Object.assign({}, state, {selcted_id:action.id});
+    }
+    console.log(action, state, newState);
+    return newState;
 }
 var store = Redux.createStore(reducer);
 subject();