See the Pen (Example)Redux-ToDoList by Shark (@sharkdeng) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js'></script>
</head>
<body>
<input id="todo" type="text" onkeypress="addNewItemFunc(this)" placeholder="What needs to be done"> <br>
<div id="container"></div> <br>
<button id="clearRemoveItemsBtn">Clear Completed</button>
<script>
const reducer = Redux.combineReducers({
todos: (state = [], action) => {
var newState = Object.assign([], state);
if (action.type == 'addNewItem') { newState.push(action.item); }
if (action.type == 'addRemoveItem') { newState[action.index].keep = 0; }
if (action.type == 'deleteRemoveItem') { newState[action.index].keep = 1; }
if (action.type == 'clearRemoveItems') { newState = newState.filter(function(item) { return item.keep == 1; }) }
return newState;
},
});
const store = Redux.createStore(reducer);
const render = () => {
const container = document.getElementById('container');
container.innerHTML = '';
const state = store.getState();
state.todos.forEach((item, i) => {
const wrapper = document.createElement('div');
const check = document.createElement('input');
check.setAttribute("type", "checkbox");
check.setAttribute("id", "check-"+i);
if (item.keep == 1) {
check.checked = false;
} else {
check.checked = true;
}
const label = document.createElement('label');
label.innerHTML = item.value;
if (item.keep == 1) {
label.setAttribute("style", "");
} else {
label.setAttribute("style", "text-decoration:line-through;");
}
wrapper.appendChild(check);
wrapper.appendChild(label);
document.getElementById('container').appendChild(wrapper);
check.onclick = () => {
if (check.checked) {
store.dispatch( { type: "addRemoveItem", index: i })
} else {
store.dispatch ( { type: "deleteRemoveItem", index: i })
}
render();
}
});
};
document.getElementById('clearRemoveItemsBtn').onclick = () => {
store.dispatch({ type: 'clearRemoveItems' });
render();
};
function addNewItemFunc(ele) {
if (event.key === "Enter") {
store.dispatch({
type: 'addNewItem',
item: {
value: document.getElementById('todo').value,
keep: 1 // 1 means keep, 0 means to remove
}
});
render();
ele.value = "";
}
}
</script>
</body>
</html>