[Redux] redux 기본 - switch 분기처리와 변수처리

1. Redux switch 분기처리

Redux 공식문서에 나타난 action 분기처리는 대부분 switch 분기처리로 되어있다.

따라서 if 분기처리보다는 switch를 통한 분기처리를 해주는 것이 깔끔하고 가독성이 더 좋다.

const reducer = (state = 0, action) => {
  if(action.type === "ADD"){
    state = state + 1
  }
  if(action.type === "MINUS"){
    state = state - 1
  }
  //console.log(state)
  return state
}

위 if분기처리로 작성되어있는 reducer action을

const reducer = (state = 0, action) => {
  switch(action.type){
    case "ADD": return state + 1
    case "MINUS" : return state - 1
    default : return state
  }
  //console.log(state)
  //return state
}

이처럼 switch-case 분기처리로 바꾸면 가독성이 좋아질 수 있다.

2. 변수처리

중요하게 쓰이는 변수나 문자열 등은 변수처리를 하여 사소한 오류발생을 방지하고, 오류가 발생하더라도 어떤 유형의 오류인지 확인할 수 있도록 구성한다.

const ADD = "ADD"
const MINUS = "MINUS"

const reducer = (state = 0, action) => {
  switch(action.type){
    case ADD : return state + 1
    case MINUS : return state - 1
    default : return state
  }
  //console.log(state)
  //return state
}

위와 같이 문자열을 변수화하여 처리해주면,

• 문자열의 따옴표 오류 및 구문오류 등 human error를 어느 정도 최소화할 수 있고
• 오류가 발생하더라도 어떤 오류인지 확인하여 이를 고칠 수 있다

위 유의사항을 기억하면서 리팩토링 및 코드 구조를 구성하도록 한다.

3. 참조링크

redux 공식문서
https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers