더북(TheBook)

14.3.2 switch 문 대신 handleActions 사용

 

우리는 리듀서에 switch 문을 사용하여 액션 type에 따라 다른 작업을 하도록 했습니다.

이 방식에는 아주 중요한 결점이 하나 있습니다. 바로 scope를 리듀서 함수로 설정했다는 것이지요. 그렇기 때문에 서로 다른 case에서 let이나 const를 사용하여 변수를 선언하려고 할 때, 같은 이름이 중첩되어 있으면 문법 검사를 하면서 오류가 발생합니다. 그렇다고 case마다 함수를 정의하면 코드를 읽기 힘들어지겠죠.

이 문제를 해결하는 것이 바로 handleActions입니다. 이 함수를 사용하면 다음 방식으로 해결할 수 있습니다.

const reducer = handleActions({
  INCREMENT: (state, action) => ({
    counter: state.counter + action.payload
  }),
 
  DECREMENT: (state, action) => ({
    counter: state.counter - action.payload
  })
}, {counter: 0});

 

첫 번째 파라미터로는 액션에 따라 실행할 함수들을 가진 객체를 넣어 주고, 두 번째 파라미터로는 상태의 기본 값(initialState)을 넣어 줍니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.