세 가지 원칙

Redux는 세 가지 기본 원칙으로 설명할 수 있습니다:

단일 진실 공급원

애플리케이션의 전역 상태는 하나의 스토어 내에서 객체 트리로 저장됩니다.

이로써 서버의 상태를 직렬화하여 클라이언트에 추가 코딩 없이 주입할 수 있어 유니버설 앱 개발이 용이해집니다. 단일 상태 트리는 또한 애플리케이션 디버깅이나 검사를 더 쉽게 하며, 개발 주기를 단축하기 위해 개발 중 앱 상태를 유지할 수 있게 합니다. 전통적으로 구현하기 어려웠던 기능(예: 실행 취소/다시 실행)도 모든 상태가 단일 트리에 저장된다면 갑자기 사소해질 수 있습니다.

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
    }
  ]
}
*/

상태는 읽기 전용

상태를 변경하는 유일한 방법은 발생한 일을 설명하는 객체인 액션을 발생시키는 것입니다.

이는 뷰나 네트워크 콜백이 직접 상태를 수정하지 못하도록 보장합니다. 대신 상태를 변환하려는 의도를 표현합니다. 모든 변경 사항이 중앙 집중화되어 엄격한 순서로 하나씩 발생하므로 주의해야 할 미묘한 경쟁 조건이 존재하지 않습니다. 액션은 평범한 객체이므로 로깅, 직렬화, 저장이 가능하며 나중에 디버깅이나 테스트 목적으로 재생할 수 있습니다.

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

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

변경은 순수 함수로 작성됩니다

상태 트리가 액션에 의해 어떻게 변형되는지 지정하기 위해 순수 리듀서를 작성합니다.

리듀서는 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수입니다. 이전 상태를 변형하지 않고 새로운 상태 객체를 반환해야 합니다. 단일 리듀서로 시작해 앱이 성장함에 따라 상태 트리의 특정 부분을 관리하는 더 작은 리듀서로 분할할 수 있습니다. 리듀서는 함수일 뿐이므로 호출 순서를 제어하거나 추가 데이터를 전달하거나, 페이지 매김과 같은 일반 작업을 위한 재사용 가능한 리듀서를 만들 수도 있습니다.

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)

이게 전부입니다! 이제 여러분은 Redux의 핵심을 알게 되었습니다.

단일 진실 공급원​

상태는 읽기 전용​

변경은 순수 함수로 작성됩니다​

단일 진실 공급원

상태는 읽기 전용

변경은 순수 함수로 작성됩니다