[ React / Redux ] Redux 상태 관리 개념정리.

 

기존에 내가 React 프로젝트에 즐겨 사용하던 상태 관리 라이브러리는 recoil 이었다.

하지만 새로운 회사에서는 Mobx와 Redux를 사용하고 있었다.

 

그래서 Redux 공부를 위해 공식 홈페이지를 보며 개념 정리를 해보려고 한다.

 

 

 

---

 

Redux 기본 개념

 

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

일관적으로 동작하고 서로 다른 환경 (서버, 클라이언트, 네이티브)에서 작동하고, 테스트 하기 쉬운 앱을 만들도록 도와주며

Redux는 React뿐만아니라 다른 UI 라이브러리와 함께 사용할 수 있으며, 매우 작은 용랑(의존 라이브러리 포함 2KB)으로 여러 기능들을 편리하게 사용할 수 있다.

 

Redux는 자바스크립트 SPA에서 갖추어야 할 요건들이 점점 복잡해짐에 따라 많은 상태를 자바스크립트 코드로 관리 할 필요성때문에 만들어지게 되었다고 한다.

 

여기에서 상태란 서버응답, 캐시 데이터, 지역적으로 생성되어 사용중이지만 서버에 저장되지 않은 데이터를 의미하며,

이외에도 활성화된 라우트, 선택된 탭, 로딩을 보여줄지 여부, 페이지네이션 컨트롤 등의 다양한 UI상태도 포함된다.

 

 

 

Redux의 세가지 원칙

 

1. 진실은 하나의 근원으로부터

애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.

서버로부터 가져온 상태는 시리얼라이즈(serialized)되거나 함수(hydrated)로 전달되며 클라이언트에서 추가적인 코딩 없이도 사용할 수 있다. 또한 하나의 상태 트리만을 가지고 있기 때문에 디버깅에도 용이하다.

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

 

 

 

2. 상태는 읽기 전용이다.

상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐이다.

뷰나 네트워크 콜백에서 상태를 직접 바꾸지 못 하며 모든 상태 변화는 중앙에서 관리되고 모든 액션은 엄격한 순서에 의해 하나하나 실행되기 때문에 신경써서 관리해야할 경쟁 상태는 없다. 액션은 평범한 객체이기 때문에 기록을 남길수 있고, 시리얼라이즈(serialized) 할 수 있으며 저장할 수 있고 이후에 테스트나 디버깅을 위해서 재현하는 것도 가능하다.

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

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

 

 

 

 

3. 변화는 순수 함수로 작성되어야 한다.

액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 리듀서를 작성해야 한다.

리듀서는 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다. 이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야 하며, 처음에는 하나의 리듀서만으로 충분하지만, 애플리케이션이 성장해나가면 상태 트리의 특정한 부분들을 조작하는 더 작인 리듀서로 나누는 것도 가능하다. 리듀서는 순수 함수이기때문에 호출되는 순서를 정하거나 추가적인 데이터를 넘길 수도 있다. 페이지네이션과 같이 일반적인 재사용 가능한 리듀서를 작성하는 것도 가능하다.

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 용어

 

- 상태(State)

type State = any

상태(상태 트리라고도 함.)는 넓은 의미의 단어지만 Redux API에서는 보통 저장소에 의해 관리되고, getState() 에 의해 반횐되는 하나의 상태값을 지칭한다. 상태는 Redux 애플리케이션의 전체 상태를 나타내며 보통 깊게 중첩되어 있는 객체이다. JSON으로 쉽게 변환될 수 없는 것들은 안에 넣지 말라고 한다.

 

 

 

- 액션(Action)

type Action = Object

액션은 상태를 변화시키려는 의도를 표현하는 객체로, 저장소에 데이터를 넣는 유일한 방법이다. UI이벤트에서 오거나, 네트워크 콜백에서 왔거나, 웹소켓과 같은 다른 소스에서 왔거나 모든 데이터는 액션을 통해 보내진다.

 

액션은 어떤 형태의 액션이 행해질지 표시하는 type 필드를 가져야하며, 타입은 상수로 정의되고 다른 모듈에서 임포트 할 수 있다.

문자열은 직렬화될 수 있기 때문에 타입으로 Symbol보다는 문자열을 쓰는게 좋다.

 

액션 격체에서 type외의 다른 부분은 사용자 마음대로 사용하면 된다고 한다. Flux Standard Action에서 액션이 어떻게 구상되어야 하는지 권장사항을 알아볼 수 있다.

 

 

 

- 리듀서(Reducer)

type Reducer<S, A> = (state: S, action: A) => S

리듀서(리듀싱 함수라고 부르기도 함.)는 누적값과 값을 받아서 새로운 누적값을 반환하는 함수이다. 값들의 컬렉션을 받아서 하나의 값으로 줄이는데 사용된다.

 

리듀서는 Redux만의 개념은 아니고, 기본 개념은 함수형 프로그래밍에서 왔다고 한다. 자바스크립트에서는 Array.prototype.reduce() 가 해당된다.

 

Redux에서 누적값은 상태 객체이고, 누적될 값은 액션이다. 리듀서는 주어진 이전 상태와 액션에서 새로운 상태를 계산한다. 리듀서는 반드시 같은 입력이 있으면 같은 출력을 반환하는 순수 함수여야만 하며, 부수효과를 가져서는 안된다. 리듀서는 Redux에서 가장 중요한 개념으로, API 호출을 리듀서 안에 넣지 말라고 경고한다.

 

 

 

- 디스패치 함수(Dispatch)

type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any

디스패치 함수는 액션이나 비동기 액션을 받는 함수이다. 받은 다음 하나 또는 여러개의 액션을 저장소에 보내거나 보내지 않을 수도 있다.

보통의 디스패치 함수와, 저장소 인스턴스가 미들웨어를 거치지 않고 제공하는 기본 dispatch 함수를 구분해야 한다.

 

기본 디스패치 함수는 반드시 동기적으로 저장소의 리듀서에 액션을 보내야 하며, 리듀서는 저장소가 반환한 이전 상태와 함께 새 상태를 계산한다. 리듀서가 사용하기 위해 액션은 평범한 객체여야 한다.

 

미들웨어는 기본 디스패치 함수를 감싼다. 미들웨어를 통해 디스패치 함수는 액션 뿐 아니라 비동기 액션을 처리할 수 있다.

미들웨어는 액션이나 비동기 액션을 다음 미들웨어에 넘기기 전에 변환하거나, 지연시키거나, 무시하거나, 해석할 수 있다.

 

 

 

- 액션 생산자(ActionCreator)

type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction

액션 생산자는 액션을 만드는 함수이다. 액션은 정보의 묶음이고, 액션 생산자는 액션을 만드는 곳이라서 두 용어를 혼동하면 안된다.

 

액션 생산자를 호출하면 액션을 만들어낼 뿐 디스패치 하지는 않는다. 저장소를 변경하기 위해서는 dispatch 함수를 호출해야 한다.

액션 생산자를 호출하여 그 결과를 저장소 인스턴스로 바로 디스패치 하는 함수를 바인드된 액션 생산자라고 부르기도 한다.

 

액션 생산자가 현재 상태를 읽어야 하거나, API 호출을 실행해야 하거나, 라우트 전환같은 부수효과를 일으켜야 한다면 액션 대신 비동기 액션을 반환해야 한다.

 

 

 

- 비동기 액션(AsyncAction)

type AsyncAction = any

비동기 액션은 디스패치 함수로 보내지는 값이지만 아직 리듀서에게 받아들여질 준비가 되어있지는 않다. 비동기 액션은 기본 dispatch() 함수로 전달되기 전에 미들웨어를 통해 액션으로 바뀌어야 한다. 비동기 액션은 사용자가 사용하는 미들웨어에 따라 서로 다른 타입이 될 수 있다. 

 

 

 

- 미들웨어(Middleware)

type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch

미들웨어는 디스패치 함수를 결합해서 새 디스패치 함수를 반환하는 고차함수이다. 미들웨어는 종종 비동기 액션을 액션으로 전환한다.

 

미들웨어는 함수 결합을 통해 서로 결합할 수 있다. 액션을 로깅하거나, 라우팅과 같은 부수효과를 일으키거나, 비동기 API 호출을 동기 액션으로 바꾸는데 유용하다. 

 

applyMiddleware(...middlewares)를 통해 더 자세히 알아볼 수 있다.

 

 

 

- 저장소(Store)

type Store = {
  dispatch: Dispatch,
  getState: () => State,
  subscribe: (listener: () => void) => () => void,
  replaceReducer: (reducer: Reducer) => void
}

저장소는 애플리케이션의 상태 트리를 가진 객체이다. 리듀서 수준에서 결합이 일어나기 때문에 Redux 앱에는 단 하나의 저장소만 있어야 한다.

• dispatch(action)는 위에서 설명한 기본 디스패치 함수이다.
• getState()는 저장소의 현재 상태를 반환한다.
• subscribe(listener)는 상태가 바뀔 때 호출될 함수를 등록한다.
• replaceReducer(nextReducer)는 핫 리로딩과 코드 분할을 구현할때 사용되며 사용자가 사용할 일은 별로 없다.

저장소 API 레퍼런스 참고 

 

 

- 저장소 생산자(StoreCreator)

type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store

저장소 생산자는 Redux 저장소를 만드는 함수이다. 디스패치 함수와 마찬가지로 Redux패키지에 들어있는 기본 저장소 생산자인 creatorStore(reducer, preloadedState) 와 저장소 인핸서에 반환되는 저장소 생산자를 구분해야 한다.

 

 

 

- 저장소 인핸서(StoreEnhancer)

type StoreEnhancer = (next: StoreCreator) => StoreCreator

저장소 인핸서는 저장소 생산자를 결합하여 강화된 새 저장소 생산자를 반환하는 고차함수이다. 미들웨어와 비슷하게 조합 가능한 방식으로 저장소 인터페이스를 바꿀 수 있게 해준다.

 

저장소 인핸서는 React에서 "컴포넌트 인핸서"로 불리는 고차 컴포넌트와 같은 개념이다.

 

저장소는 인스턴스라기보다 함수들이 모인 일반적인 객체이기 때문에 기존의 저장소를 변경하지 않고도 복제본을 만들고 수정할 수 있다.

compose 문서 예제 참고.

 

 

 

---

 출처 

Redux 공식 페이지