Redux - React 상태 관련 라이브러리

Redux?

Redux is a predictable state container for JavaScript applications. 

리덕스는 자바스크립트 앱에서 예측가능한 상태관리를 위한 컨테이너이다.

Redux의 세가지 원칙

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

2. State is read-only

Redux는 action 을 통해 상태를 변경한다.

3. Changes are made with pure functions

변경을 일으키는 함수는 오직 순수함수로만 가능하다.

Redux의 상태 변화 흐름

Redux 데이터 흐름 예(Redux 공식 문서 참조)

• 초기상태
  • root reducer 함수를 사용하여 Redux Store를 만든다.
  • Store는 root reducer를 한번 호출하고, return 값을 초기 상태로 저장한다.
  • UI 가 처음 렌더링 되면, UI 구성요소는 Redux 저장소의 현재 상태에 접근하고 렌더링 할 항목을 결정한다. 
• 업데이트
  • 사용자가 버튼을 클릭한다.
  • 앱은 dispatch를 Reudx Store에 전달한다.
  • Store는 이전 State와 현재 Action으로 다시 Reducer 함수를 실행하고 Return을 새로운 State로 저장한다.
  • Store는 구독하고 있는 모든 UI에 Store가 업데이트 됬음을 알린다.
  • 해당 데이터가 필요한 모든 UI는 필요한 State가 변경됬는지 확인한다.
  • 데이터가 변경된 각 요소들은 새 데이터로 강제 렌더링되기 때문에 화면에 표시된 내용을 업데이트 할 수 있다.

참조

Redux 정리

 

Redux - A predictable state container for JavaScript apps. | Redux