[Redux] 노마드코더 강의 정리 - 초보자를 위한 리덕스 101 #1 Pure Redux: Counter

Redux

: 자바스크립트 어플리케이션의 state를 관리할 수 있다.
- 리덕스는 리액트와 분리되어있다. 앵귤러, 뷰, 바닐라 등에서 쓸 수 있다.

- Redux 문서(한글): http://dobbit.github.io/redux

 

state

: 바뀌는 data

- redux는 모든 것을 state로 관리

store

: state를 넣는 저장소 

reducer

: state를 변경하는 함수 

https://www.zerocho.com/category/React/post/57b60e7fcfbef617003bf456

 

create-react-app

$ npx create-react-app vanilla-redux

 

프로젝트 구조

- public, src 폴더

 

$ npm add redux 

 

 

store.getstate()

: 현재 state 값 (return data) 

store.subscribe() 
: 현재 state 변화 감지 

store.dispatch() 
: action 메세지를 보내면서 store와 커뮤니케이션 
: action 타입은 무조건 object

 

 

 

ex) 간단한 계산기 예제

import {createStore} from "redux";

const ADD = "add";
const MINUS = "minus";

const add = document.querySelector("#add");
const minus = document.querySelector("#minus");
const num = document.querySelector("#num");

num.innerText = 0;

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

const store = createStore(reducer);
console.log(store.getState());

const calAdd = () => {
    store.dispatch({type: ADD});
}

const calMinus = () => {
    store.dispatch({type: MINUS});
}

const updateCal = () => {
    num.innerText = store.getState();
}

add.addEventListener("click", calAdd);
minus.addEventListener("click", calMinus);
store.subscribe(updateCal);