[ React redux 03 ] 변화를 일으키는 함수, 리듀서

01. 변화를 일으키는 함수, 리듀서

이번에는 상태에 변화를 일으키는 함수인 리듀서를 알아보자,

리듀서는 파라미터를 두개 받는다. 첫번재 파라미터는 현재 상태고, 두번째 파라미터는 액션 객체이다.

함수 내부에서는 switch문을 사용하여 action.type에 따라 새로운 상태를 만들어서 반환해야 한다.

리듀서가 초기에 사용할 초기 상태 initialState값부터 먼저 설정해야 리듀서를 만들 수 있다.

우리가 작성할 예제 코드에는 숫자 값이 필요하니 새 객체를 만들어서 그 안에 number라는 키를 0으로 설정해보자.

액션 생성함수 아래쪽에 아래와 같이 initialState를 정의해보자.

//기존 코드 이어서
//(...)

const initialState = {
  number : 0
}

이제 리듀서 함수를 만들어 보자. initialState 아래쪽에 아래와 같이 함수를 정의해보자.

//(...)

function counter(state = initialState, action) {
  switch(action.type) {
    case INCREMENT:
      return { number: state.number + action.diff }
    case DECREMENT:
      return { number: state.number - action.diff }
    default:
      return state;
  }
}

예제 코드가 숫자를 빼고 더하는 기능이므로 리듀서 함수의 이름은 counter()로 지정하고,

함수에서 파라미터를 설정하는 부분에 state = initialState가 설정되어 있는데 이는 ES6 문법으로, 

state 값이 undefined라면 initialState를 기본값으로 사용한다는 의미이다.

함수 내부에서는 action.type에 따라 현재 상태와 액션 객체를 참조하여 새 객체를 만들어 주었다. 

지금은 number 값만 설정했는데, 지금처럼 상태에 값이 하나만 잇는 경우는 많지 않다.

number 말고도 다른값이 있으면 어떻게 해야 할까? 그방법은 아래 코드를 참고해보자.

//(...)

const initialState = {
  number : 1,
  foo: 'bar',
  baz: 'qux'
}

function counter(state = initialState, action) {
  switch(action.type) {
    case INCREMENT:
      return Object.assign({}, state, {
        number: state.number + action.diff 
      })
    case DECREMENT:
      return Object.assign({}, state, {
        number: state.number - action.diff 
      })
    default:
      return state;
  }
}

리덕스에서 상태를 업데이트할 때는 컴포넌트의 state를 다룰 대처럼 값을 직접 수정하면 안된다.

새로운 객체를 만든 후 그 안에 상태를 정의해야 한다.

Object.assign 함수를 실행하면 파라미터로 전달된 객체들을 순서대로 합쳐준다.

Object.assign을 사용하면 역순으로 객체를 왼쪽으로 덮어쓰면서 원하는 상태를 지닌 새객체를 만들어준다.

ES6문법의 전개연산자(...)를 사용하면 더욱 깔끔하게 코드를 입력 할 수 있다. 코드를 한번 아래와 같이 입력해보자.

function counter(state = initialState, action) {
  switch(action.type) {
    case INCREMENT:
      return {
        ...state,
        number: state.number + action.diff
      }
    case DECREMENT:
      return {
        ...state,
        number: state.number - action.diff
      }
    default:
      return state;
  }
}

리듀서를 잘 만들었는지 확인해 보자. 아래쪽에 다음 코드를 입력하고 Run 버튼을 눌러보자.

//(...)
console.log(counter(undefined, increment(1)));

number가 1에서 2로 잘 변경되었다. 테스트후에는 이 코드를 지워 주자.

리덕스를 사용하면 이렇게 리듀서 함수를 직접 실행하는 일은 없다. 이 함수를 실행하는 작업은 리덕스의 몫이다.

이 글은 Velopert님의 책을 실습하며 공부한 자료입니다.