🎯VanillaJS redux

리덕스(Redux)

바닐라 리덕스

리덕스 는 상태(state) 데이터를 전역으로 관리해주기 위해 나온 라이브러리 이다 리액트 한에서 나온게 아닌 바닐라에서도 적용이 가능하다.

import { createStore } from 'redux'; // npm i redux -> import

const reducer = (state = 0) => {
  // 데이터 상태값을 바꾸고 modify 하는걸 책임 져주는 함수
  // 원하는 동작 코드

  return state;
};

const store = createStore(reducer /*콜백함수*/); // createStore 함수로 state데이터 저장 공간을 만들어준다.

// console.log(store.getState()) 통해서 reducer 리턴 값을 볼수가 있다.

reducer modify

const reducer = ((state = 0), action); //만약 state 값이 undefined 이면 0으로 초기화

action: redux 에서 함수를(reducer) 부를때 쓰는 두번째
파라미터이다
action 은 객체로 인식
예):{type:"somthing" 등등} 객체로 받아 들인다.

함수와 소통할수 있는 함수 dispatch()를 사용하여 소통할 수 있다.

subscribe() 함수는 store 안에 있는 변화를 알게 해주는 함수이다.

예) 더하기와 빼기를 하는 기능을 만들어 볼꺼다.

import { createStore } from 'redux';

const add = document.getElementById('add');
const minus = document.getElementById('minus');
const number = document.querySelector('span');

number.innerText = 0;

const countModifier = (count = 0, action) => {
  if (action.type === 'ADD') {
    //action {type:"ADD"} 일때 실행하는 코드
    return count + 1;
  } else if (action.type === 'MINUS') {
    //action {type:"MINUS"} 일때 실행하는 코드
    return count - 1;
  } else {
    return count;
  }
};

const countStore = createStore(countModifier); // 저장소를 선언 및 countModifier콜백함수  할당.

const onChange = () => {
  number.innerText = countStore.getState(); //store 에 있는 상태값출력
};

countStore.subscribe(onChange); // store 안에 값이 변화 할때마다 onChange 함수 실행

const handleAdd = () => {
  countStore.dispatch({ type: 'ADD' }); // 소통 함수 dispatch 사용해서  소통하기.
};

const handleMinus = () => {
  countStore.dispatch({ type: 'MINUS' }); // 소통 함수 dispatch 사용해서  소통하기.
};

add.addEventListener('click', handleAdd);
minus.addEventListener('click', handleMinus);

reducer 를 호출할때 리턴하는 값은 절대 mutate 하면 안된다. mutate 하는 대신에 새로운 Object 를 생성해서 리턴해야한다.
** 상태값을 바꾸는 방법은 action 이 유일하다 밖에서 상태값을 바꿀 수 없다.

countStore.getState() +=1 // Bad!!!

mutation:

let friends = ['bob']; // friends 라는 배열 선언
friends.push('ellie'); // 이런방식으로 배열을 변형 시키는것이 mutation 이다.

새로운 Object 로 만드는 방법:

let friends = ['bob'];
friends = [...friends, 'ellie']; //이런식으로 새로운 object 를 생성하는 방법이 있다.

참고자료 https://redux.js.org/basics/reducers