1. PURE REDUX: COUNTER

Hapjeong Girl·2022년 11월 1일

MUTSA_STUDY

목록 보기

7/11

vanila redux를 설치하자

⇒ npx create-react-app vanila-redux
쓸모 없는 파일들을 삭제하자

⇒ css, index.css, logo, serviceWorker, test 등 App.js와 Index.js만 빼고 다 삭제하자!
App.js와 Index.js는 처음에 Vanila로 우리가 공부할 거기에 안에 코드를 다 삭제한다!

⇒ 그냥 App.js를 삭제해도 된다!

README.md도 수정하자

# Vanila Redux

Learning Vanila-Redux and React-Redux

1.0 Vanilla Counter

Index.html을 초기화해보자

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Vanilla Redux</title>
</head>

<body>
  <button id="add">Add</button>
  <span>0</span>
  <button id="minus">Minus</button>
</body>

</html>

Index.js

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

let count = 0;

number.innerText = count;

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

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

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

완성!

1.1 Store and Reducer

앞선 1.0 예제를 리덕스를 사용해 만들어보자!

리덕스를 설치하자

⇒ yarn add redux
리덕스에서 createStore를 import 하자

⇒ import { createStore } from 'redux';
💡 **store** : 나의 data, state를 넣는 곳
store 변수를 만들어주자
```
const reducer = () => {};
const store = createStore(reducer);
```
💡 **reducer** : data를 바꾸고 modify하는 걸 책임지는 함수, application의 data를 반환한다.

1.2 Actions

action을 사용해 count의 값을 변경해주자

💡 **action** : 리덕스 함수의 두번째 매개변수.

⇒ counter.dispatch()를 사용해 action을 보낼 수 있다.

⇒ 단, action은 무조건 객체여야 하고, type이 있어야 한다!

import { createStore } from 'redux';

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

const counterModifier = (count = 0, action) => {
	if (action.type === 'ADD') {
		return count + 1;
	} else if (action.type === 'MINUS') {
		return count - 1;
	} else {
		return count;
	}
};
const countStore = createStore(counterModifier);

countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'MINUS' });

console.log(countStore.getState());

완성!

1.3 Subscriptions

dispatch와 모든 것들을 버튼에 연결해보자!

💡 **subscribe** : store 안에 있는 변화들을 알 수 있게 해준다.

import { createStore } from 'redux';

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

const counterModifier = (count = 0, action) => {
	if (action.type === 'ADD') {
		return count + 1;
	} else if (action.type === 'MINUS') {
		return count - 1;
	} else {
		return count;
	}
};
const countStore = createStore(counterModifier);

const onChange = () => {
	number.innerText = countStore.getState();
};
countStore.subscribe(onChange);

add.addEventListener('click', () => countStore.dispatch({ type: 'ADD' }));
minus.addEventListener('click', () => countStore.dispatch({ type: 'MINUS' }));

완성!

1.4 Recap Refactor

코드를 리펙토링하자

if → switch

const counterModifier = (count = 0, action) => {
	switch (action.type) {
		case 'ADD':
			return count + 1;
		case 'MINUS':
			return count - 1;
		default:
			return count;
	}
};

ADD, MINUS와 같은 string말고 string을 저장해주는 const를 만들어 사용하자

const ADD = 'ADD';
const MINUS = 'MINUS';

const counterModifier = (count = 0, action) => {
	switch (action.type) {
		case ADD:
			return count + 1;
		case MINUS:
			return count - 1;
		default:
			return count;
	}
};

add.addEventListener('click', () => countStore.dispatch({ type: ADD }));
minus.addEventListener('click', () => countStore.dispatch({ type: MINUS }));

Hapjeong Girl

프론트엔드 / 컴퓨터공학과 4학년

이전 포스트

6. TRELLO CLONE

다음 포스트