codesandbox.io
Open in
urlscan Pro
172.64.154.107
Public Scan
URL:
https://codesandbox.io/p/sandbox/to-do-with-redux-vanilla-javascript-wcvfh?file=%2Fsrc%2Findex.js%3A17%2C5
Submission: On May 22 via manual from IN — Scanned from DE
Submission: On May 22 via manual from IN — Scanned from DE
Form analysis 1 forms found in the DOM
<form aria-hidden="true" class="c-PJLV c-PJLV-ihAnYFq-css"><input autocomplete="off" maxlength="80" name="branchName" size="38" required="" spellcheck="false" type="text"
class="c-jpqwRa c-jpqwRa-ksACLP-state-enabled c-jpqwRa-iSnQfd-variant-base c-jpqwRa-kQKWIF-cv c-jpqwRa-idCgzUZ-css" value="To-do with Redux + Vanilla JavaScript">
<div data-projection-id="14" class="c-PJLV c-PJLV-itpDzW-css" style="opacity: 1; transform: none;">To-do-with-Redux-+-Vanilla-JavaScript</div>
</form>Text Content
CodeSandbox was updated!
Sandbox
iamhayoung
/
Drafts
/
To-do-with-Redux-+-Vanilla-JavaScript
To-do with Redux + Vanilla JavaScript
A
VS CodeShare
Sign In
EXPLORER
*
Drag a view here to display.
SANDBOX INFO
NODEBOX
*
*
*
*
*
src
index.js
index.html
package.json
DEPENDENCIES
parcel-bundler
^1.6.1
redux
4.1.0
uuid
8.3.2
OUTLINE
*
*
Show All Commands
Ctrl+Shift+P
Go to File
Ctrl+P
Find in Files
Ctrl+Shift+F
Toggle Full Screen
F11
Show Settings
Ctrl+,
index.js
*
*
*
*
src
index.js
addToDo
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
import { createStore } from "redux";
import { v4 as uuidv4 } from "uuid";
const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");
// Action Type 정의
const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";
// Action creator: ADD action을 생성(action을 return)하기 위한 용도의 함수
const addToDo = (text) => {
return {
type: ADD_TODO,
text
};
};
// Action creator: Delete action을 생성(action을 return)하기 위한 용도의 함수
const deleteToDo = (id) => {
return {
type: DELETE_TODO,
id
};
};
const reducer = (toDos = [], action) => {
switch (action.type) {
case ADD_TODO:
// state를 mutate해서는 안되기 때문에 불변성을 지키기 위해
// 기존의 state는 건드리지 않고 spread구문을 이용하여
// 이전에 있던 state의 내용에 새로운 값을 추가시키는 형식으로 기존의 state를 보존함
const newToDoObj = { text: action.text, id: uuidv4() };
return [newToDoObj, ...toDos];
case DELETE_TODO:
// state를 mutate해서는 안되기 때문에 불변성을 지키기 위해
// filter를 사용하여 결과값에 true가 되는 값으로 새로운 state 배열을 만듦
const cleanedToDos = toDos.filter((toDo) => toDo.id !== action.id);
return cleanedToDos;
default:
return toDos;
}
};
const dispatchAddToDo = (text) => {
Press desired key combination and then press ENTER.
Open command palette
Ctrl
K
Preview
CodeSandbox - Sandbox (Web)
Prettier
Layout: US
JavaScript JSX
LF
UTF-8
Spaces: 2
Ln 17, Col 5
🍪 YES, WE USE COOKIES
This website utilizes cookies to enable essential site functionality and
analytics. You may change your settings at any time or accept the default
settings. You may close this banner to continue with only essential cookies.
Read more about this in our privacy and cookie statement.
Accept allReject all
Manage preferences
*
*
* * nodebox
*
*
*
*
*
*
*
*
*
*
* Output
OUTPUT
* CodeSandbox - Extension InstallationCodeSandbox LSP: typescriptGitHub
AuthenticationPrettier─────────Extension Host (Worker)Notebook
renderingWindow
*
*
*
*
Drag a view here to display.
OUTPUT
* CodeSandbox - Extension InstallationCodeSandbox LSP: typescriptGitHub
AuthenticationPrettier─────────Extension Host (Worker)Notebook
renderingWindow
*
*
*
Press desired key combination and then press ENTER.
*
Drag a view here to display.