Skip to content

Commit bfa0510

Browse files
author
Kwangsoo Shin
committed
Components: Revert v0.0.1
1 parent 5fa980c commit bfa0510

File tree

10 files changed

+241
-47
lines changed

10 files changed

+241
-47
lines changed

‎components/CounterM.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//hbs
2+
//dispatch
3+
4+
const tmpl = require('hbs/counter.hbs');
5+
const Counter = require('Counter');
6+
const $ = require('jquery');
7+
8+
class CounterM extends Counter {
9+
initialRender() {
10+
11+
this.dom = $(tmpl(this.__store.getState()));
12+
this.disp = this.dom.find('[data-role=disp]');
13+
this.dispatcher = this.dom.find('[data-role=action]');
14+
this.dispatcher.on('click', (evt) => {
15+
this.__store.dispatch({ type: evt.target.dataset.actionType });
16+
});
17+
18+
$(this.__container).append(this.dom);
19+
}
20+
render() {
21+
console.log(this.disp.html);
22+
this.disp.html(this.__store.getState().count);
23+
}
24+
}
25+
26+
module.exports = CounterM;

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"body-parser": "~1.16.0",
1515
"cookie-parser": "~1.4.3",
1616
"debug": "~2.6.0",
17+
"domready": "^1.0.8",
1718
"es3ify-loader": "^0.2.0",
1819
"express": "~4.14.1",
1920
"handlebars": "^4.0.6",

‎parents/BaseComponent.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// const Storage = require('Storage');
2+
3+
// const noop = () => {};
4+
// const reducerEnhancer = () => {
5+
//
6+
// }
7+
// const _reducer = (state, action) => {
8+
// };
9+
// let storage;
10+
11+
class BaseComponent {
12+
constructor({ initialStore = null, container = document.body } = {}) {
13+
this.__store = null;
14+
this.__container = container;
15+
if (initialStore && this.render) {
16+
this.__store = initialStore;
17+
this.__store.subscribe(() => {
18+
this.render();
19+
});
20+
}
21+
this.initialRender && this.initialRender();
22+
}
23+
// constructor({ initialStore = null, initialState = {}, container = document.body } = {}) {
24+
// if (initialStore && initialStore instanceof Storage) {
25+
// storage = initialStore;
26+
// } else {
27+
// if (initialState) { storage = new Storage({ initialState }); }
28+
// }
29+
// this.container = container;
30+
// this.initialRender();
31+
// storage.subscribe(this.render);
32+
// }
33+
//
34+
// getState() {
35+
// return storage.getState();
36+
// }
37+
//
38+
// getStorage() {
39+
// return storage;
40+
// }
41+
//
42+
// render() {
43+
// console.log('render', 'BaseComponent');
44+
// }
45+
//
46+
// dispatch(action) {
47+
// storage.dispatch(action);
48+
// }
49+
//
50+
// replaceReducer(reducer) {
51+
// storage.replaceReducer(reducer);
52+
// }
53+
54+
}
55+
56+
module.exports = BaseComponent;

‎parents/Counter.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const BaseComponent = require('BaseComponent');
2+
3+
class Counter extends BaseComponent {
4+
5+
}
6+
7+
module.exports = Counter;

‎parents/Storage.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
//pkgs
2+
const { createStore, applyMiddleware } = require('redux');
3+
4+
let instance = null;
5+
6+
function logger({ getState }) {
7+
return (next) => (action) => {
8+
console.log(action);
9+
let returnValue = next(action);
10+
return returnValue;
11+
};
12+
}
13+
14+
function __reducer(state, action) {
15+
return state;
16+
}
17+
18+
let __store;
19+
20+
class Storage {
21+
22+
constructor({ initialState = null } = {}) {
23+
__store = createStore(__reducer, initialState, applyMiddleware(logger));
24+
}
25+
26+
getState() {
27+
return __store.getState();
28+
}
29+
30+
replaceStore(replacedStore = null) {
31+
if (replacedStore) { __store = replacedStore; }
32+
}
33+
34+
replaceState(replacedState = null) {
35+
36+
}
37+
38+
subscribe(render) {
39+
__store.subscribe(render);
40+
}
41+
42+
dispatch(action) {
43+
__store.dispatch(action);
44+
}
45+
46+
replaceReducer(reducer) {
47+
__store.replaceReducer(reducer);
48+
}
49+
50+
}
51+
52+
53+
54+
module.exports = Storage;

‎roots/DealDetail.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// // Interface.
2+
// const BaseComponent = require('BaseComponent');
3+
// const { combineReducer } = require('redux');
4+
// const countReducer = requier('countReducer');
5+
//
6+
// const Slide = require('slide');
7+
// const Counter = require('CounterM');
8+
//
9+
// const initialState = { count: 0, items: [], images: [] };
10+
// let combinedReducers;
11+
//
12+
// class DealDetail extends BaseComponent {
13+
// initialRender() {
14+
// console.log(this.getState(), 'this.getState()')
15+
// // combinedReducers = {
16+
// // count: countReducer
17+
// // };
18+
// // this.replaceReducer(combineReducer(combinedReducers));
19+
// let counter = new Counter({ initialStore: this.getStorage(), container: document.querySelector('#counter') }).reducer;
20+
// this.replaceReducer({
21+
// count: counter.reducer
22+
// })
23+
// }
24+
// }
25+
//
26+
// const dealDetail = new DealDetail({ initialState });
27+
//
28+
const { createStore, combineReducers } = require('redux');
29+
const dr = require('domready');
30+
31+
const store = createStore(combineReducers({
32+
count: count
33+
}), {count: 0});
34+
35+
const CounterM = require('CounterM');
36+
37+
let counter = new CounterM({ initialStore: store, container: document.querySelector('#counter') });
38+
39+
function count(state = 0, action) {
40+
switch(action.type) {
41+
case 'UP':
42+
return state + 1;
43+
case 'DOWN':
44+
return state + 2;
45+
default:
46+
return state;
47+
}
48+
}

‎src/hbs/counter.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div>
2-
<h1 id="disp">{{ count }}</h1>
2+
<h1 data-role="disp">{{ count }}</h1>
33
<button id="up" data-role="action" data-action-type="UP">UP</button>
44
<button id="down" data-role="action" data-action-type="DOWN">DOWN</button>
55
</div>

‎src/index.js‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,38 @@
11
// require('babel-polyfill');
2-
const { createStore } = require('../node_modules/redux/dist/redux');
3-
const { combineReducers } = require('../node_modules/redux/dist/redux');
4-
5-
const option = require('reducers/option');
6-
7-
const $ = require('jquery');
8-
const Counter = require('components/Counter');
9-
const Option = require('components/Option');
10-
11-
const initialState = {
12-
option: {
13-
count: 0,
14-
mode: 'single'
15-
}
16-
}
17-
18-
const combines = combineReducers({ option });
19-
20-
const store = createStore(combines, initialState);
21-
store.subscribe(render);
22-
23-
24-
function initRender() {
25-
const counter = new Counter({initialStore: store, container: $('#optionGroup1')});
26-
const option = new Option({ initialStore: store, container: $('#optionGroup1') });
27-
render();
28-
}
29-
30-
function render() {
31-
document.getElementById('result').innerHTML = store.getState().option.count.toString();
32-
}
33-
34-
$(() => {
35-
initRender();
36-
});
2+
// const { createStore } = require('../node_modules/redux/dist/redux');
3+
// const { combineReducers } = require('../node_modules/redux/dist/redux');
4+
//
5+
// const option = require('reducers/option');
6+
//
7+
// const $ = require('jquery');
8+
// const Counter = require('components/Counter');
9+
// const Option = require('components/Option');
10+
//
11+
// const initialState = {
12+
// option: {
13+
// count: 0,
14+
// mode: 'single'
15+
// }
16+
// }
17+
//
18+
// const combines = combineReducers({ option });
19+
//
20+
// const store = createStore(combines, initialState);
21+
// store.subscribe(render);
22+
//
23+
//
24+
// function initRender() {
25+
// const counter = new Counter({initialStore: store, container: $('#optionGroup1')});
26+
// const option = new Option({ initialStore: store, container: $('#optionGroup1') });
27+
// render();
28+
// }
29+
//
30+
// function render() {
31+
// document.getElementById('result').innerHTML = store.getState().option.count.toString();
32+
// }
33+
//
34+
// $(() => {
35+
// initRender();
36+
// });
37+
//
38+
const DealDetail = require('DealDetail');

‎views/index.jade‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
extends layout
22

33
block content
4-
h1= title
5-
p Welcome to #{title}
64

7-
h1 옵션카운트
8-
div(id="optionGroup1")
9-
10-
h1 TotalCount :
11-
h2(id="result" style="color:green;")
12-
13-
div(id="selectWrapper")
5+
h1 딜상세페이지
6+
div(id="wrapper")
7+
section(id="counter")
148

159
//- script(src='./js/redux.bundle.js')
1610
script(src='./js/redux.bundle.js')

‎webpack.config.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@ module.exports = {
66
extensions: ['.js', '.hbs'],
77
modules: [
88
'node_modules',
9-
path.resolve(__dirname, 'src')
9+
path.resolve(__dirname, 'src'),
10+
path.resolve(__dirname, 'parents'),
11+
path.resolve(__dirname, 'roots'),
12+
path.resolve(__dirname, 'modules'),
13+
path.resolve(__dirname, 'components'),
14+
path.resolve(__dirname, 'actions'),
15+
path.resolve(__dirname, 'reducers'),
1016
],
1117
alias: {
12-
'handlebars': 'handlebars/dist/handlebars.js'
18+
'handlebars': 'handlebars/dist/handlebars.js',
1319
}
1420
},
1521
entry: {

0 commit comments

Comments
 (0)