리덕스 #3. 리덕스의 기본구조

//액션 타입 설정
const INCREASE = "INCREASE"
const DECREASE = "DECREASE"

//액션 생성 함수
const increase = () => {
  return {
    type: INCREASE,
    nowState: "Increase!",
    payload: 10
  }
}

const decrease = () => {
  return {
    type: DECREASE,
    nowState: "Decrease!",
    payload: 5
  }
}

const initalState = {
  nowState: "inital",
  payload: 0
}

//리듀서
function Reducer(state = initalState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        nowState: action.nowState,
        payload: state.payload + action.payload
      };
    case DECREASE:
      return {
        ...state,
        nowState: action.nowState,
        payload: state.payload - action.payload
      };
    default:
      return state
  }
}

//스토어 생성
const store = createStore(Reducer);

//구독과 좋아요
store.subscribe(() => {
  const state = store.getState();
  const nowState = state.nowState;
  const payload = state.payload;
  console.log(`now state is '${nowState}' and payload is '${payload}'`)
})

//디스패치 실행(주로 UI를 통해서 실행된다.)
dispatch(increase());//now state is 'Increase!' and payload is '10'
dispatch(decrease());//now state is 'Decrease!' and payload is '5'
dispatch(increase());//now state is 'Increase!' and payload is '15'
dispatch(decrease());//now state is 'Decrease!' and payload is '10'

첫번째 포스팅에서도 간단한 코드 구성을 설명하였지만 이번 포스팅에서는 좀 더 구체적인 사용법을 알기위해 숫자를 증가하고 증감시키는 리덕스 앱을 작성하였다.

매우 베이직한 코드 구성이다. 만약 전 포스팅과 기본적인 자바스크립트를 이해한다면 쉽게 이해할 수 있다.(폴더 구조까지 포스팅하면 너무 산으로 갈거같아 일부로 안함.)

여기서 몇가지 알아야 할 부분이 있는데

• type은 무조건 스트링형태의 type글자로 적어야한다. 안그럼 에러남ㅇㅇ
• payload는 약속된 글귀이다. 다른 글귀로 적어도 상관없다.
• 액션의 반환값은 무조건 "객체"여야한다. 이는 초기 state가 객체이고 초기 state에 덮어씌워야하기때문!(나중에 미들웨어를 사용하여 액션을 함수로 만들수도 있다. 하지만 결국 객체로 반환된다.)

작동 순서

1. 디스패치 호출 : 디스패치를 호출시키면 파라미터로 들어온 "액션 생성함수"가 실행된다.

2. 액션 생성 : 액션 생성함수가 실행되면 액션 객체가 반환되며 액션 객체를 리듀서로 이동시킨다.

   2-1. 미들웨어 : 미들웨어가 중간에 있다면 여기서 처리된다. 미들웨어는 나중에 설명...

3. 리듀서 : 액션값을 받은 리듀서는 액션의 타입을 비교하여 이전 상태값과 액션의 값을 비교하여 현재 상태값으로 적용시킨다.

4. 스토어 : 리듀서로 작성된 새로운 상태값은 스토어에 저장된다.

5. 서브스크라이브 : 스토어에 변화가 감지되면 서브스크라이브는 콜백 함수를 실행시킨다.

작동이 잘 된다. 어느 프로젝트에서 리덕스를 적용시키든 위와 같은 워크 플로우는 변하지않는다.