Components: Update BaseComponent, DealDetail

* new Storage component

Author: Kwangsoo Shin

components/CounterM.js

@@ -1,6 +1,3 @@
-//hbs
-//dispatch
-
 const tmpl = require('hbs/counter.hbs');
 const Counter = require('Counter');
 const $ = require('jquery');
@@ -13,7 +10,6 @@ class CounterM extends Counter {
     this.dispatcher.on('click', (evt) => {
       this.dispatch({ type: evt.target.dataset.actionType });
     });
-    
     $(this.__container).append(this.dom);
   }
   render() {

libs/Storage/index.js

@@ -0,0 +1,21 @@
+const { createStore, combineReducers } = require('redux');
+
+let __store;
+
+class Storage {
+  constructor({ reducers = {}, initialState = {} } = {}) {
+    __store = createStore(combineReducers(reducers), initialState);
+  }
+  subscribe(render) {
+    __store.subscribe(render);
+  }
+  getState() {
+    return __store.getState();
+  }
+  dispatch(action) {
+    console.log(action);
+    __store.dispatch(action);
+  }
+}
+
+module.exports = Storage;

parents/BaseComponent.js

@@ -1,67 +1,24 @@
-// const Storage = require('Storage');
-
-// const noop = () => {};
-// const reducerEnhancer = () => {
-//   
-// }
-// const _reducer = (state, action) => {
-// };
-// let storage;
+const Storage = require('Storage');
 
 class BaseComponent {
-  constructor({ initialStore = null, container = document.body } = {}) {
-    this.__store = initialStore;
+  constructor({ initialStorage = new Storage({ reducers: {}, initialState: {} }), container = document.body } = {}) {
+    this.__storage = initialStorage;
     this.__container = container;
-    if (this.__store) {
-      this.__store.subscribe(() => {
-        this.render();
-      });
-    }
+    this.__storage.subscribe(() => this.render() );
     this.initialRender();
   }
   getState() {
-    return this.__store.getState();
+    return this.__storage.getState();
   }
   dispatch(action) {
-    return this.__store.dispatch(action);
+    return this.__storage.dispatch(action);
   }
   initialRender() {
     // InitialRender.
   }
   render() {
     // Render.
   }
-  // constructor({ initialStore = null, initialState = {}, container = document.body } = {}) {
-  //   if (initialStore && initialStore instanceof Storage) { 
-  //     storage = initialStore;
-  //   } else {
-  //     if (initialState) { storage = new Storage({ initialState }); }
-  //   }
-  //   this.container = container;
-  //   this.initialRender();
-  //   storage.subscribe(this.render);
-  // }
-  // 
-  // getState() {
-  //   return storage.getState();
-  // }
-  // 
-  // getStorage() {
-  //   return storage;
-  // }
-  // 
-  // render() {
-  //   console.log('render', 'BaseComponent');
-  // }
-  // 
-  // dispatch(action) {
-  //   storage.dispatch(action);
-  // }
-  // 
-  // replaceReducer(reducer) {
-  //   storage.replaceReducer(reducer);
-  // }
-  
 }
 
 module.exports = BaseComponent;

parents/Storage.js

@@ -1,47 +1,24 @@
-// // Interface.
-// const BaseComponent = require('BaseComponent');
-// const { combineReducer } = require('redux');
-// const countReducer = requier('countReducer');
-// 
-// const Slide = require('slide');
-// const Counter = require('CounterM');
-// 
-// const initialState = { count: 0, items: [], images: [] };
-// let combinedReducers;
-// 
-// class DealDetail extends BaseComponent {
-//   initialRender() {
-//     console.log(this.getState(), 'this.getState()')
-//     // combinedReducers = {
-//     //   count: countReducer
-//     // };
-//     // this.replaceReducer(combineReducer(combinedReducers));
-//     let counter = new Counter({ initialStore: this.getStorage(), container: document.querySelector('#counter') }).reducer;
-//     this.replaceReducer({
-//       count: counter.reducer
-//     })
-//   }
-// }
-// 
-// const dealDetail = new DealDetail({ initialState });
-// 
-const { createStore, combineReducers } = require('redux');
-const dr = require('domready');
+// initialize default reducer & state.
 const initialState = { 
   count: 0,
   images: [
     'https://camo.githubusercontent.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67',
     'https://camo.githubusercontent.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67',
   ]
  };
-
 const dealDetailReducers = require('dealDetailReducer');
-const store = createStore(combineReducers(dealDetailReducers), initialState);
 
+// load libs.
+const dr = require('domready');
+const Storage = require('Storage');
+const storage = new Storage({ reducers: dealDetailReducers, initialState });
+
+// load components
 const CounterM = require('CounterM');
 const Images = require('Images');
 
+// initialize.
 dr(() => {
-  let counter = new CounterM({ initialStore: store, container: document.querySelector('#counter') });
-  let images = new Images({ initialStore: store, container: document.querySelector('#images') });
+  let counter = new CounterM({ initialStorage: storage, container: document.querySelector('#counter') });
+  let images = new Images({ initialStorage: storage, container: document.querySelector('#images') });
 });

roots/DealDetail.js

@@ -13,6 +13,7 @@ module.exports = {
       path.resolve(__dirname, 'components'),
       path.resolve(__dirname, 'actions'),
       path.resolve(__dirname, 'reducers'),
+      path.resolve(__dirname, 'libs'),
     ],
     alias: {
       'handlebars': 'handlebars/dist/handlebars.js',