Redux

Redux

FLUX 아키텍처 패턴을 기반으로하는 JavaScript 라이브러리

Redux 데이터 흐름

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
5. 상태가 변경되면, React는 화면을 다시 렌더링한다.

---

• 액션(Action) : 액션은 애플리케이션에서 발생하는 이벤트를 나타냅니다. 예를 들어, 사용자가 로그인을 시도할 때, 액션은 "LOGIN"과 같이 사용자가 로그인을 시도하고 있음을 나타내는 문자열일 수 있습니다.

• 스토어(Store) : 스토어는 애플리케이션의 상태를 포함하고 있는 객체입니다. 스토어는 상태를 읽고 쓰는 메서드를 제공하며, 상태의 변경을 구독할 수 있는 메서드를 제공합니다.

• 리듀서(Reducer) : 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 순수 함수입니다. 순수 함수는 동일한 인수를 받으면 항상 같은 값을 반환하며, 부작용이 없습니다.

• 디스패치(Dispatch) : 디스패치는 액션을 스토어로 보내는 메서드입니다. 스토어는 이 액션과 이전 상태를 리듀서에 전달하고, 새로운 상태를 반환합니다.

---

보편적으로 사용하던 MVC(Model, View, Controller) 패턴은 유저의 사용으로 Controller가 조작되면 데이터가 저장된 Model의 데이터를 조작하여 관리했다. 데이터가 변경되면 View를 통해 사용자에게 출력했다.

다만, 유저도 뷰를 통해 데이터를 입력하면 모델이 변경될 수 있었다. 데이터가 양방향으로 흐르는 것이다.

규모가 여러 모델과 뷰가 생기면서 문제는 발생한다. 뷰가 다양한 상호작용을 통해 여러 뷰를 업데이트하고 모델 역시 여러 뷰에 데이터를 전달했다. 이는 매우 복잡한 데이터 흐름으로 이어져 서로 높은 의존성을 가지게 된다.

때문에 Action을 만들고, Dispatcher로 전달하여 스토어(모델)의 데이터를 업데이트 하는 단방향 형식의 FLUX 모델이 탄생했다.