본문 바로가기
React.js/Redux

리덕스 소개 (Redux는 Flux 패턴을 기반으로 만들어진 라이브러리이다.)

by 찬찬2 2022. 9. 20.

■ Redux와 FLUX는 엄밀히 말하자면 다르다. (링크)

Redux는 Flux 라고 하는 아키텍처에 "Reducer"라는 것을 결합하여 만들었다고 볼 수 있다. 그리고 Redux 공식문서에서는 같기도 하고 다르기도 하다고 표현한다.

Redux = Reducer + Flux 

 

■ 다른 점 (링크)

1. Redux의 Store는 state만을 저장한다. 

- Flux 에서는 store에서 state를 ①갱신하는 로직과 ②보관 해주는 역할을 한다. 하지만 Redux는 state만 보관 하며, 갱신을 해주는 로직은 다른 곳에서 하게되는데, 그 것이 바로 reducer이다.

 

2. Reducer가 존재한다.

- Reducer는 상태와 액션을 묶어주는 역할을 한다. Reducer는 상태와 액션을 전달 받아 '이전 상태'를 '다음 상태'로 교체 한 후 state의 복사본을 반환하는 순수함수이다.

주어진 상태를 수정하는 것이 아니라, 새로운 상태로 교체하는 것이 중요하다. 절대 기존의 state를 그대로 편집하지 않습니다.

 

3. Dispatcher가 없다.

- Flux는 dispatcher에서 모든 action을 받아서 이를 store 에게 전달하는 역할을했다. 하지만 Redux는 하나의 store만이 존재하기 때문에 굳이 dispatcher에서 action을 받을 필요 없이 reducer에서 action을 분류해 store로 향하면 됩니다.

 

https://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux

 


 

[1] 리덕스의 필요성 (링크)

- 애플리케이션의 상태를 관리하기 위한 견고하고 안정적인 솔루션을 제공한다. 여기 저기 혼란스럽게 흩어져 있는 상태를 체계화 하여 애플리케이션을 관리하도록 도와준다.

 

컴포넌트간 네스팅 속에서의 props, state의 전달 흐름

 

[2] Redux의 아키텍처

Action | Reducer | Store | State | Subscription

 

 

[3]  리덕스의 흐름

 

https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow

 

[4] 리덕스 디렉토리 구조

 

https://yamoo9.github.io/react-master/lecture/rd-redux.html#%E1%84%85%E1%85%B5%E1%84%83%E1%85%B2%E1%84%89%E1%85%A5

 

댓글