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()));

😁 코드 설명

1. reducer
   • switch로 action.type 분류.
2. return [...state, {text:action.text, id:Date.now()}];
   • state.push() 는 사용 ❌
   • 위는 state를 직접 수정하는 일.
3. 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);

😁 코드 설명

1. paintToDos
   • 새로운 li, button으로 ul에 넣어주는 역할.
   • button에 del event 넣어줌.
2. addToDo, deleteToDo
   • dispatch로 type과 text, id 넘겨줌.

<출처 : 노마드코더>