[Redux] Redux의 세 가지 원칙

 

 

상태 관리 라이브러리 Redux는 세 가지 원칙이 있다. 

 

이는 리덕스 공식 페이지에서도 한 섹션을 차지할 정도로 근본적인 리덕스의 작동 원칙을 설명하는 것들인데, 

 

오늘은 공식문서에 설명하고 있는 Redux의 세 가지 원칙에 대해 알아보자. 

 

 

 

 

Single source of truth

 

'어플리케이션의 글로벌 state는 하나의 store 안 객체 트리에 저장된다.'

 

이 원칙은 서버의 state를 별다른 코딩 작업 없이 serialize 하고 데이터를 공급하는 전체적인 애플리케이션 제작이 쉽도록 해준다. 또한 하나의 state 트리는 디버깅에 유리하고 빠른 개발 사이클 속에서 애플리케이션의 state 유지에 도움을 준다. 예를 들어, 이전에는 구현하기 어려웠던 undo/redo와 같은 기능들이 하나의 트리에 state가 저장되면 구현하기가 매우 쉬워진다. 

 

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

 

 

State is read-only

 

'state를 변경하는 유일한 방법은 어떤 행위가 일어났는지를 알려주는 action을 보내는 방법 뿐이다.'

 

이 원칙은 view나 네트워크 콜백을 통해서 직접적으로는 절대 state를 변경할 수 없도록 보장한다. 대신에, state변경을 시도할 표현을 할 뿐이다. 모든 변화는 엄격한 순서에 따라 하나하나 발생하고 중앙에서 처리되기 때문에 주의해야 할 경쟁 상황이 발생하지 않는다. action은 단순한 객체이기 때문에 기록하거나 serialize 하거나 저장하거나 추후 디버깅을 위해 재사용될 수도 있다. 

 

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

 

Changes are made with pure functions

 

'state 트리가 action에 의해 어떻게 변화하는지 특정하기 위해 순수 reducer를 사용한다.' 

 

reducer는 이전 state와 action을 받고 다음 state를 반환하는 순수 함수다. 주의할 것은 이전 state를 변경하는 것이 아닌, 새로운 state 객체를 리턴하는 것이다. 처음에는 하나의 reducer로 시작했다가, 앱의 크기가 커짐에 따라 여러 개의 다른 영역의 state 트리를 관리하는 작은 reducer들로 나눌 수 있다. reducer는 함수이기 때문에 어떤 것이 호출될지 순서를 컨트롤할 수 있으며 추가 데이터를 보내 주거나 혹은 pagination과 같은 공통된 작업을 위해 재사용 가능하게도 할 수 있다.  

 

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)