Redux

• Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.

Redux란?

• Redux는 actions라 불리는 event들을 사용해서 애플리케이션 상태를 관리하고 업데이트하는 패턴 및 라이브러리이다.
• 전체 응용 프로그램에서 사용되어야 하는 상태에 대한 중앙 집중식 저장소 역할을 하며, 예측 가능한 방식으로만 상태를 업데이트할 수 있도록 하는 규칙을 제공한다.

우리는 왜 Redux를 사용해야 하는가?

• Redux는 응용 프로그램의 많은 부분에서 필요한 전역 상태를 관리하는 데 도움이 된다.
• Redux로 제공된 패턴 및 도구들을 사용하면 응용 프로그램의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지, 그리고 이러한 변경 사항이 발생할 때 응용 프로그램 로직이 어떻게 작동하는지 쉽게 이해할 수 있다.

예제 실행해보기

React Redux 앱 만들기

npx create-react-app [app name] --template redux

• CRA를 이용해서 새로운 앱을 만들었다.

기본 예제

import { createStore } from 'redux'

/**
 * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다.  오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예제에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 앱의 상태를 보관하는 Redux 저장소를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.subscribe(() => console.log(store.getState())))

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화할수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

• 앱의 상태 전부는 하나의 저정소(store) 안에 있는 객체 트리에 저장된다.

• 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것이다.

  • 액션이 어떻게 상태 트리를 변경할지 명시하기 위해 리듀서(reducers)를 작성해야 한다.

• 상태를 바로 변경하는 대신, 액션이라 불리는 평범한 객체를 통해 일어날 변경을 명시한다.

• 그리고 각의 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 결정하는 특별한 함수인 리듀서를 작성한다.

• 보통의 Redux 앱에는 하나의 루트 리듀서 함수를 가진 단 하나의 저장소가 있다.

  • 앱이 커짐에 따라 루트 리듀서를 상태 트리의 서로 다른 부분에서 개별적으로 동작하는 작은 리듀서들로 나눌 수 있다.
  • React 앱을 하나의 루트 컴포넌트에서 시작해서 여러 작은 컴포넌트의 조합으로 바꾸는 것과 동일하다.