Components: Added new components (Images)

* Update BaseComponent.
* Add reducers:dealDetailReducers

Author: Kwangsoo Shin

components/CounterM.js

@@ -7,19 +7,17 @@ const $ = require('jquery');
 
 class CounterM extends Counter {
   initialRender() {
-    
-    this.dom = $(tmpl(this.__store.getState()));
+    this.dom = $(tmpl(this.getState()));
     this.disp = this.dom.find('[data-role=disp]');
     this.dispatcher = this.dom.find('[data-role=action]');
     this.dispatcher.on('click', (evt) => {
-      this.__store.dispatch({ type: evt.target.dataset.actionType });
+      this.dispatch({ type: evt.target.dataset.actionType });
     });
 
     $(this.__container).append(this.dom);
   }
   render() {
-    console.log(this.disp.html);
-    this.disp.html(this.__store.getState().count);
+    this.disp.html(this.getState().count);
   }
 }
 

components/Images.js

@@ -0,0 +1,14 @@
+const BaseComponent = require('BaseComponent');
+const tmpl = require('hbs/images');
+const $ = require('jquery');
+
+class Images extends BaseComponent {
+  initialRender() {
+    $(this.__container).append(tmpl(this.getState()));
+  }
+  render() {
+    
+  }
+}
+
+module.exports = Images;

package.json

@@ -22,6 +22,7 @@
     "jade": "~1.11.0",
     "jquery": "^1.12.4",
     "morgan": "~1.7.0",
+    "redux": "^3.6.0",
     "serve-favicon": "~2.3.2",
     "webpack": "^2.2.1"
   },

parents/BaseComponent.js

@@ -10,15 +10,26 @@
 
 class BaseComponent {
   constructor({ initialStore = null, container = document.body } = {}) {
-    this.__store = null;
+    this.__store = initialStore;
     this.__container = container;
-    if (initialStore && this.render) {
-      this.__store = initialStore;
+    if (this.__store) {
       this.__store.subscribe(() => {
         this.render();
       });
     }
-    this.initialRender && this.initialRender();
+    this.initialRender();
+  }
+  getState() {
+    return this.__store.getState();
+  }
+  dispatch(action) {
+    return this.__store.dispatch(action);
+  }
+  initialRender() {
+    // InitialRender.
+  }
+  render() {
+    // Render.
   }
   // constructor({ initialStore = null, initialState = {}, container = document.body } = {}) {
   //   if (initialStore && initialStore instanceof Storage) { 

public/js/redux.bundle.js

@@ -0,0 +1,25 @@
+function count(state = 0, action) {
+  switch(action.type) {
+    case 'UP':
+      return state + 1;
+    case 'DOWN':
+      return state + 2;
+    default:
+      return state;
+  }
+}
+
+function images(state = [], action) {
+  if (action.type === 'ADD_IMAGE') {
+    return Array.from(state).push(action.url);
+  } else if (action.type === 'REMOVE_IMAGE') {
+    return Array.from(state).splice(0, state.length - 1);
+  } else {
+    return state;
+  }
+}
+
+module.exports = {
+  count,
+  images,
+};

reducers/dealDetailReducer.js

@@ -27,22 +27,21 @@
 // 
 const { createStore, combineReducers } = require('redux');
 const dr = require('domready');
+const initialState = { 
+  count: 0,
+  images: [
+    'https://camo.githubusercontent.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67',
+    'https://camo.githubusercontent.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67',
+  ]
+ };
 
-const store = createStore(combineReducers({
-  count: count
-}), {count: 0});
+const dealDetailReducers = require('dealDetailReducer');
+const store = createStore(combineReducers(dealDetailReducers), initialState);
 
 const CounterM = require('CounterM');
+const Images = require('Images');
 
-let counter = new CounterM({ initialStore: store, container: document.querySelector('#counter') });
-
-function count(state = 0, action) {
-  switch(action.type) {
-    case 'UP':
-      return state + 1;
-    case 'DOWN':
-      return state + 2;
-    default:
-      return state;
-  }
-}
+dr(() => {
+  let counter = new CounterM({ initialStore: store, container: document.querySelector('#counter') });
+  let images = new Images({ initialStore: store, container: document.querySelector('#images') });
+});

roots/DealDetail.js

@@ -0,0 +1,5 @@
+<ul>
+  {{#each images as |img|}}
+  <li><img src="{{ img }}" /></li>
+  {{/each}}
+</ul>

src/hbs/images.hbs

@@ -5,6 +5,7 @@ block content
   h1 딜상세페이지
   div(id="wrapper")
     section(id="counter")
+    section(id="images")
 
   //- script(src='./js/redux.bundle.js')
   script(src='./js/redux.bundle.js')