Redux_JS
📌 javascript에 redux 사용하는 방법
yarn add redux : terminal에서 redux 설치.
📌 redux는 data를 더 잘 사용하기 위해서 만들어진 도구!
🎈 Count Button
🎁 Vanilla JS(without Redux)
const add = document.getElementById("Add_but");
const minus = document.getElementById("Minus_but");
const num = document.querySelector("span");
let counter = 0;
num.innerText = counter;
const updateText = () =>{
num.innerText = counter;
}
const handleAdd=()=>{
counter = counter + 1;
updateText();
}
const handleMinus=()=>{
counter = counter - 1;
updateText();
}
add.addEventListener ("click", handleAdd);
minus.addEventListener("click",handleMinus);
- vanilla js로만 만든 add, minus 버튼.
- counter라는 공동의 변수를 선언.
- handleAdd, handleMinus의 함수를 통해 해당 변수의 값 변환.
- updateText함수로 변환된 변수의 값 innerhtml로 갱신.
📌 여기서 Redux로 차근차근 바꿔보기.
const reducer = () =>{};
reducer 선언 : data를 수정하는 것을 책임.
오직 reducer만 data 수정 가능.
const store = createStore(reducer)
store 선언.(state와 같은)
const reducer = (count, action)
action : redux에서 function을 부를 때 쓰는 두번째 매개변수.
store.dispatch({type:"ADD"});
action : action은 dispatch를 통해 type과 함께 보냄.
reducer에서는 action.type에 따라 if문 switch문 실행.
store.subscribe(onChange);
subscribe : reducer의 변화에 따라 update.
🎁 Redux-JS
const add = document.getElementById("Add_but");
const minus = document.getElementById("Minus_but");
const num = document.querySelector("span");
//유일하게 data 수정가능한 함수.
const reducer = (count = 0, action) =>{
switch(action.type){
case "ADD":
return count + 1;
case "MINUS":
return count - 1;
default:
return count;
}
};
const store = createStore(reducer);
const onChange = () =>{
num.innerText = store.getState();
};
store.subscribe(onChange);
console.log(store.getState());
add.addEventListener("click",()=>store.dispatch({type:"ADD"}));
minus.addEventListener("click",()=>store.dispatch({type:"MINUS"}));
🧨 action에는 무조건 type이 있어야 함.
reducer는 if-else문을 사용해도 되지만 대부분 switch문 사용. (가독성 👍)
😁 다음은 더 심화된 과정으로!!
🎈 ToDo List
🎁 Vanilla JS(without Redux)
const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");
const createToDo = toDo =>{
const li = document.createElement("li");
li.innerText = toDo;
ul.appendChild(li);
};
const onSubmit = e => {
e.preventDefault();
const toDo = input.value;
input.value = "";
createToDo(toDo);
};
- toDolist를 vanilla JS로만 작성한 코드.
- 이 코드를 Redux를 활용하여 더욱 효율적으로 작성해보장.
🎁 Redux-JS
- 코드의 길이가 긴 관계로 나눠서 다뤄보자!
import {createStore} from "redux";
const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");
const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";
const reducer=(state=[], action) =>{
switch(action.type){
case ADD_TODO:
return [...state, {text:action.text, id:Date.now()}];
case DELETE_TODO:
return state.filter(toDo => toDo.id !== action.id);
default:
return state;
}
};
const store = createStore(reducer);
store.subscribe(()=>console.log(store.getState()));
😁 코드 설명
- reducer
- switch로 action.type 분류.
return [...state, {text:action.text, id:Date.now()}];
state.push()
는 사용 ❌- 위는 state를 직접 수정하는 일.
return state.filter(toDo => toDo.id !== action.id)
state.splice
는 사용 ❌- 위는 state를 직접 수정하는 일.
const paintToDos = () =>{
const toDos = store.getState();
ul.innerHTML = "";
toDos.forEach(toDo =>{
const li = document.createElement("li");
const btn = document.createElement("button");
btn.innerText = "DEL";
btn.addEventListener("click",deleteToDo);
li.id = toDo.id;
li.innerText = toDo.text;
li.appendChild(btn);
ul.appendChild(li);
});
};
store.subscribe(paintToDos);
const addToDo=(text)=>{
store.dispatch({type:ADD_TODO, text});
}
const deleteToDo = e =>{
const id = parseInt(e.target.parentNode.id);
store.dispatch({type:DELETE_TODO,id});
}
const onSubmit = e => {
e.preventDefault();
const toDo = input.value;
input.value = "X";
addToDo(toDo);
}
form.addEventListener("submit",onSubmit);
😁 코드 설명
- paintToDos
- 새로운 li, button으로 ul에 넣어주는 역할.
- button에 del event 넣어줌.
- addToDo, deleteToDo
- dispatch로 type과 text, id 넘겨줌.
<출처 : 노마드코더>
Author And Source
이 문제에 관하여(Redux_JS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@luck2901/ReduxJS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)