[ Redux ] Vanilla Redux 알아보기

리덕스는 데이터를 관리하는데 도와주는 역할을 한다.
데이터 상태관리를 위해 React나 Angular와 함께 자주 쓰인다.

---

Store

전체 데이터의 상태를 저장하고 있는 데이터 저장소

createStore()

하나의 Reducer를 가지는 데이터 저장소를 생성하는 함수

const countStore = createStore(countReducer);

dispatch()

리듀서에게 action 인자를 전송할 수 있는 Store의 함수

const handleAdd = () => {
  countStore.dispatch({ type: ADD });
};
const handleMinus = () => {
  countStore.dispatch({ type: MINUS });
};

subscribe()

데이터가 변경될 때 실행될 함수를 인자로 전송할 수 있는 Store의 함수

getState()

Store 내부 데이터의 상태를 확인할 수 있는 Store의 함수

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

countStore.subscribe(onChange);

Action

Action은 Store라는 저장소에 정보를 전달하기 위한 데이터 묶음

const ADD = "ADD_TODO"
const DELETE = "DELETE_TODO"

Action Creator

Action Creator는 Action을 생성하기 위한 함수이다.

const handleAdd = (text) => {
    	return {
    			type: ADD,
    			text,		
    	}
}

Reducer

데이터의 상태를 관리할 수 있는 오직 1개의 함수

• Store와 데이터 정보를 주고 받는 역할을 해준다.
• String 타입으로 전달된 Action을 통해 데이터를 어떻게 변경할지 관리해주는 역할을 한다.

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

CombineReducers()

많은 리듀서들을 하나로 합쳐 하나의 리듀서로 관리할 수 있도록 해준다.

import { combineReducers } from 'redux';

const toDoReducer = combineReducers({
  countReducer,
  nameReducer
});