[Chllange/TIL] Flux Architecture - Redux & Redux Toolkit

 

Flux Architecture란 무엇일까?

그전에 Architecture(아키텍처)에 대해 먼저 알아보자.

 

아키텍처란, 프로그래밍을 할 때 어떤 구조를 가지고 프로그래밍을 할지 설계하는 것을 의미한다.

 

그렇다면 Flux는 뭘까? 

Flux란 단방향 데이터 구조 흐름을 활용한 리액트용 애플리케이션 아키텍처이다.

여기서 핵심은 단방향 데이터 구조 흐름이라는 것인데

즉 Flux Architexture란, 단방향 데이터 구조 흐름을 갖는 프로그래밍을 말한다.

---

그럼 Flux Architecture의 흐름을 따라가 보자.

1. Action이 이벤트 발생을 감지하면 일종의 허브역할을 하는  Dispatcher에 Action을 전달
2. Dispatcher는 state가 저장되어 있는 Store에 Action을 전달
3. Store는 상태를 업데이트하여 다시 state를 저장
4. 해당 Store를 구독하고 있던 View는 state의 변화를 감지하여 리렌더링함
5. 또다시 Action이 이벤트를 감지하면 Dispatcher에게 전달 
6. 이런 방식으로 단방향 흐름 반복

---

이번에는  Reducer + Flux로, Flux Architecture를 구현한 전역 상태 관리를 위한 라이브러리인 Redux의 흐름을 따라가 보자.

 

1. 이벤트가 발생하면 액션 객체를 dispatch를 통해 reducer에 전달
2. reducer는 순수 함수로, 인자로 받은 액션 객체를 활용하여 state 상태를 업데이트시키고 새로운 상태를 반환하여 스토어에 전달
3. store는 변경된 상태를 저장함
4. store를 구독하고 있던 컴포넌트는 state의 변화를 감지하여 리렌더링을 함
5. 위와 같은 과정이 반복됨

<Flux와의 주요 차이>

1. Store의 역할 차이: Flux에서는 Store가 상태와 상태 갱신 로직을 모두 담고 있지만, Redux에서는 Store는 단순히 상태를 보관하며, 갱신 로직은 리듀서에서 처리한다.
2. Dispatcher 삭제: reducer 함수가 상태를 관리하기 때문에 Redux는 단일 Store를 사용하며, Dispatcher가 따로 필요하지 않다.
3. 불변성 준수: Redux는 상태의 불변성을 꼭 준수해야 한다.

---

 

Redux를 사용하다 보면, 보일러 플레이트 코드가 상당히 많다는 것을 깨닫게 된다.

이런 복잡성을 해소하고 코드를 보다 간결하게 작성하기 위해 Redux Toolkit (RTK)가 등장하게 되었다.

 

Redux에서는

• reducer를 직접 정의하고,
• 여러 개의 reducer가 있을 경우 combineReducers를 통해 합친 뒤,
• createStore를 사용해 store를 생성해야 했다.

 

반면 Redux Toolkit에서는

• createSlice를 통해 reducer 로직과 액션 함수를 한 곳에서 정의할 수 있으며,
• configureStore를 사용하면 combineReducers를 따로 호출하지 않아도
• 여러 reducer를 자동으로 합쳐 store를 생성할 수 있다.

 

Redux Toolkit을 사용하면 다음과 같은 장점이 있다.

• 코드를 간소화할 수 있다.
• 내부적으로 Immer 라이브러리를 사용하여 불변성을 자동으로 관리해 준다.
• 추가 설정 없이 Redux 개발 환경을 최적화할 수 있다.