Redux(2) - 구성요소

Store

store는 state가 담긴 하나의 저장공간(및 관리공간)입니다. store는 두개 이상일 필요가 없습니다. redux 자체가 하나의 공간에서 state를 관리하기 위해서 사용되기 때문입니다! (redux의 1원칙)

import createStore from "redux";
.
.
.
const store = createStore(Reducer);

Action

app의 state를 가지고 있는 데이터의 묶음입니다. state.dispatch()를 통해서 스토어에 액션을 보내줄 수 있습니다.
action은 type을 가지고 있고 type은 reducer에서 유용하게 사용됩니다. action 자체는 객체를 리턴하게 됩니다. (redux의 2원칙, 즉 읽기 전용을 위해)

export const ADD_VALUE = "ADD_VALUE"

export const plusone = (value) =>{
  return {
    type : ADD_VALUE,
    payload : {
      value
    }
  }
}

Reducer

Action 그 자체는 변화할 값만 알려주지만 실제로 값을 변화시키는 함수를 작성하는 것은 Reducer가 맡게 됩니다. action은 dispatch로 넘겨준다고 했는데 Reducer는 action에 옷을 입혀서 무슨 기능을 할 지를 예상시키게 도와줍니다.
Reducer는 state와 action을 인자로 가지고
switch를 통해 action에 따라 기능을 달리 하도록 도와줍니다.

단! reducer는 순수 함수입니다! (redux의 3원칙)

import ADD_VALUE from ".../index"

const valueReducer = (state, action) => {
  switch(action.type){
    case ADD_VALUE :
      return {...state, values : state.value + action.payload.value}
    default :
      return state;
  }

Dispatch

Action이 Reducer를 통해서 준비가 되었다면 dispatch를 통해서 주요 기능에 전달되게 됩니다.

const handleAddValue = (value) => {
  store.dispatch(plusone(value))
};

//app.js에서 기능을 정의하지 않고도 handleAddValue를 만들 수 있게 되었습니다.