-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
66 lines (57 loc) · 1.47 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { debounce, put } from "../redux-saga/packages/redux-saga/effects";
import createSagaMiddleware from "../redux-saga/packages/redux-saga";
import { createStore, applyMiddleware } from "redux";
const delayLength = 1000;
function* addLine(divId) {
yield put({ type: "add-line", divId });
}
function* lineSaga() {
yield debounce(
{ delayLength, leading: true, trailing: false },
"keydown",
addLine,
"debounce-leading"
);
yield debounce(
{ delayLength, leading: false, trailing: true },
"keydown",
addLine,
"debounce-trailing"
);
yield debounce(
{ delayLength, leading: true, trailing: true },
"keydown",
addLine,
"debounce-leading-and-trailing"
);
}
const sagaMiddleware = createSagaMiddleware();
const initialState = {
"debounce-leading": 0,
"debounce-trailing": 0,
"debounce-leading-and-trailing": 0,
};
const store = createStore(
(state = initialState, action) => {
if (action.type === "add-line") {
return {
...state,
[action.divId]: (state[action.divId] + 1) % 1000,
};
} else {
return state;
}
},
initialState,
applyMiddleware(sagaMiddleware)
);
store.subscribe((...args) => {
Object.keys(initialState).forEach((divId) => {
const count = store.getState()[divId];
document.getElementById(divId).innerHTML = "█".repeat(count);
});
});
sagaMiddleware.run(lineSaga);
document.addEventListener("keydown", () => {
store.dispatch({ type: "keydown" });
});