Redux: 특징과 흐름

  • Single Source of Truth (단 하나의 진실의 근원)
    Application의 state를 위해 단 한개의 stroe를 사용한다. Flux와의 주요 차이점.(Flux에서는 여러개의 Store를 사용)
  • State is Read-only (State는 읽기전용이다)
    Application에서 store의 state를 직접 변경할 수 없다. state를 변경하기 위해서는 무조건 action이 dispatch 되어야 한다.
  • Changes are made with Pure Functions (변화는 순수 함수로 만들어져야 한다)
    비동기 처리를 하며 안된다.
    action 객체를 처리하는 함수를 reducer라고 부른다.
    reducer는 정보를 바아서 상태를 어떻게 업데이트 할 지 정의한다.
    reducer는 ‘순수 함수’로 작성 되어야 한다.
    • 외부 네트워크 혹은 데이터베이스에 접근하지 않아야하며, 인수는 변경되지 않아야한다.
    • 같은 인수로 실행된 함수는 언제나 같은 결과를 반환해야한다.
    • ‘순수하지 않은’ API 사용 불가 (Date.now(), Math.random() 등)

Redux로의 카툰 안내서

  • Flux에서 Redux로 오면서 캐릭터의 배역이 약간 달라졌다.
  • 액션 생성자(action creators)
    • Redux는 Flux에서 액션 생성자를 그대로 가져왔다.
  • 스토어(store)
    • Flux에서는 다수의 스토어 갖지만, Redux는 단 하나의 스토어만 가진다.
  • 리듀서(the reducers)
    • 변화를 일으켜주는 함수
    • store는 reducers한테 어떤 상태를 변화 할지 묻는다.
    • reducers는 한개가 될 수도 있고 여러개도 될 수 가 있다.
    • 한개만 있는 리듀서는 root reducer(루트 리듀서)가 되면 액션을 받으면 처리하고, 여러개의 리듀서가 있을 경우 그 리듀서들 중에서 전달받은 액션을 찾아내서 그 액션을 담당하는 리듀서에게 전달을 한다.
    • 리듀서는 마치 서류 복사에 지나치게 열성적인 사무실 직원들과 같다. 일을 망치는 것에 아주 민감하므로 넘겨받은 예전 상태는 변경하지 않는다. 대신 새로운 복사본을 만든 후 거기에다가 모든 변경사항을 적용한다.
    • Redux의 키 아이디어 중 하나이다. 상태 객체는 직접 변경되지 않는다. 대신, 각각의 상태 조각이 복사 후 변경되고 새로운 상태 객체 하나로 합쳐진다.
  • 뷰(the view) : 멍청한 컴포넌트, 똑똑한컴 포넌트
    • Presentational Components(멍청한 컴포넌트)
      • DOM과 style을 가지고 있다.
      • store에 직접적인 연결이 없다.
      • props로만 데이터를 가져온다.
      • state를 가지고 있지 않다.(있는 경우 UI 관련)
      • 주로 함수형, state가 필요하거나 LifeCycle이 필요해질 때 클래스
    • Container Components(똑똑한 컴포넌트)
      • DOM 엘리먼트가 직접적으로 사용되지 않음, 있다면 감싸는 용도로만 사용
      • 자기 자신의 CSS style을 가지고 있지 않다.
      • 액션 처리를 책임진다.
      • props를 통해서 똑똑한 컴포넌트에 함수를 보낸다.
  Presentational Components Container Components
위치 중간과 말단 컴포넌트 최상위, 라우트 핸들러
Redux와 연관됨 아니오 예
데이터를 읽기 위해 props에서 데이터를 읽음 Redux 상태를 구독
데이터를 바꾸기 위해 props에서 콜백을 부름 Redux 액션을 보냄
  • 뷰 레이어 바인딩(the view layer binding)
    • React에서 redux를 사용할 때 좀 더 쉽게 모든 컴포넌트를 스토어에 연결
    • IT 부서와 같다. 많은 기술적인 세부사항들을 처리해서 트리 구조가 세부사항에 신경 쓰지 않도록 해준다
  • 루트 컴포넌트(the root component)
    • CEO와 같다.
    • 모든 팀이 일이 하도록 임무를 가지고 있다. redux의 기본적인 설정을 맡는다. 설정이후에는 하는 일이 없다.

데이터 흐름(the data flow)

  1. 뷰가 액션을 요청한다. 액션 생성자가 포맷을 변환한 뒤 돌려준다.
  2. 뷰가 스토어한데 액션을 준다
  3. 스토어가 현재 상태 트리와 액션을 루트 리듀서에게 보낸다.
  4. 루트 리듀서가 현재 상태에 맞게 나눠서 담당 서브 리듀서에게 보낸다.
  5. 서브 리듀서는 상태 사본을 만들어서 변경해야 할 곳을 변경하고 루트 리듀서에게 사본을 돌려둔다.
  6. 루트 리듀서는 변경된 상태를 다 받아서 한곳에 모아서 스토어게 돌려준다.
  7. 스토어는 뷰 레이어 바인딩한테 상태가 변경됐다는 걸을 알려주면
  8. 뷰 레이어 바인딩은 스토어에게 새로운 상태를 보내달라고 요청한다.
  9. 새 데이터를 받고 뷰한테 화면의 특정부분을 업데이트하라고 한다.

code & view