on
[Redux] #0 Introduction ~ #1.1 Store and Reducer
[Redux] #0 Introduction ~ #1.1 Store and Reducer
초보자를 위한 리덕스 101을 바탕으로 작성했습니다.
Redux는 Javascript application들의 state을 관리하는 방법
Redux는 React에 의존하는 라이브러리가 아니고, Angular, Vue.js, Vanilla Javascript 등에서 다 쓸 수 있음
npx create-react-app vanilla-redux
위 명령어를 통해 react app 생성 후 vscode에서 연다
먼저, React가 아닌 Vanilla application을 만들 것이기 때문에 index.js 빼고 다 지워준다
github에서 만든 저장소에 push한다
Vanilla Counter
Vanilla Redux
index.html에서 normal simple html Vanilla Redux를 사용하기 위해 코드를 위와 같이 수정한다
Vanilla Redux Add Minus
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 += 1; updateText(); }; const handleMinus = () => { count -= 1; updateText(); }; add.addEventListener("click", handleAdd); minus.addEventListener("click", handleMinus);
버튼 2개가 있는 간단한 application을 작성했다
버튼을 눌렀을 때 작동하도록 index.js를 수정한다
html에게 뭔가가 바뀌었다고 알려주기 위해 함수를 쓴다는 것 자체가 리덕스가 유용한 이유 중 하나이다
Store and Reducer
npm install redux
위에서 작성한 코드를 간단한 Redux로 교체하도록 할건데, 먼저 Redux를 사용하기 위해 Redux를 설치한다
Redux에서 create store를 import하여 사용한다
import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); const reducer = () => {}; const store = createStore(reducer); // createStore은 reducer를 주기를 요구하고, reducer는 function이어야 함
store는 state를 넣는 곳이다 (state는 application에서 바뀌는 data를 말함)
store는 기본적으로 나의 data를 넣을 수 있는 장소를 생성함
Redux는 나의 data를 관리하는데 도와주는 역할을 하기 위해 만들어짐
위 경우에는 Redux가 count를 -1, +1 하도록 도와주기 위해 쓰이게 됨
createStore은 reducer를 만들어 달라고 요구하고, reducer는 data를 변경할 수 있는 function임
Reducer는 위와 같은 function들을 사용할 수 있고,
import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); const countModifier = () => { // reducer return "hello"; }; const countStore = createStore(countModifier); console.log(countStore.getState());
이렇게 getState()를 사용하면 콘솔창에 countModifier가 return한 hello가 출력되는 것을 볼 수 있음
import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); const countModifier = (state = 0) => { return state; }; const countStore = createStore(countModifier); // createStore은 우리에게 reducer를 주기를 요구함. reducer는 function이어야 함 console.log(countStore.getState());
countModifier만이 data를 modify 할 수 있다
유일하게 1개의 함수만 data를 modify 할 수 있고, 그게 바로 리덕스의 장점이다
-> data가 기본적으로 한 곳에만 있는 것!
store를 만들면, countModifier를 initial state으로 불러온다
initial state을 0으로 지정했고, 위 코드를 실행하면 콘솔에 0이 출력된다
유일하게 countModifier만 state을 modify 할 수 있는데, 그렇다면 countModifier로 하여금 ++, --를 하게 하려면?
-> action을 이용하면 됨!
from http://yjcruise.tistory.com/45 by ccl(A) rewrite - 2021-03-02 01:00:53