Vanilla Redux - counter 구현하기

16466 단어 JavaScriptreduxTILJavaScript

VanillanJS로 counter 구현하기

<body>
  <button id="add">Add</button>
  <span></span>
  <button id="minus">Minus</button>
</body>
const add = document.querySelector('#add');
const minus = document.querySelector('#minus');
const number = document.querySelector('span');

let count = 0;
number.innerText = count;

const updateText = () => {
  number.innerText = count;
};

const handleAdd = () => {
  count++;
  updateText();
};

const handleMinus = () => {
  count--;
  updateText();
};

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

동작구현


Vanilla-Redux로 counter 구현하기

먼저 Redux를 사용하려면 yarn add redux or npm install redux 명령어를 실행한다.

import { createStore } from 'redux'
redux의 createStore를 import한다.
store는 data, state를 관리하는 곳이다.

state: application에서 바뀌는 data들을 의미한다.

아래의 코드에서는 state가 count가 된다.

import { createStore } from 'redux';

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

let count = 0;
number.innerText = count;

const updateText = () => {
  number.innerText = count;
};

const handleAdd = () => { // increase
  count++;
  updateText();
};

const handleMinus = () => { // decrease
  count--;
  updateText();
};

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

store가 하는 일은 기본적으로 data를 넣을 수 있는 장소를 생성한다.

createStore( ) 함수는 reducer를 주길 요구하고 있다.
그리고 reducer는 함수여야 된다. 그럼 reducer가 도대체 뭘까?


reducer

reducer는 데이터들을 수정하고 변경한다.

reducer가 리턴하는 것이 application에 있는 data들이 된다.

import { createStore } from 'redux';

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

const countModifier = () => {
  return 'Hello Redux!';
};

const countStore = createStore(countModifier);

console.log(countStore);

countStore가 콘솔에 찍힌 값을 확인해보면, 함수들을 확인할 수 있다. 

console.log(countStore.getState()); // Hello Redux!

const countModifier = (state = 0) => {
  console.log(state);
  return state;
};

// store가 하는 일은 기본적으로 data를 저장하는 장소, reducer를 만들어서 넣어줘야 된다.
const countStore = createStore(countModifier);
console.log(`얘는 이제 초기화 한 다음 : ${countStore.getState()}`);

state의 초기값을 10으로 해놓고 getState()를 찍어봐도 값이 잘 찍히는 것을 확인할 수 있다.

state를 다루는 것은 위의 countModifier에서만 가능하도록 해야 되는데 어떻게 할 수 있을까?
바로 action을 사용해서 state를 증가, 감소시킬 수 있다.


중간 정리

  • crateStore( )로 Store를 create한다.
  • store는 data를 저장하는 공간이다.
  • crateStore( )에는 reducer를 넣어줘야된다.
  • default로 data modifier는 현재의 state와 함께 불려진다.
  • state를 action를 통해 modify한다.

action

action은 redux에서 function을 부를 때 쓰는 두번 째 parameter, argument이다.

action에 값을 보내려면, store.dispatch( )를 사용해야 된다.








백준 1541 잃어버린 괄호
데이터 분석 - 아이템 구매율 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage