Redux, React, action, reducer, store

---

Redux  ✔️  

 

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

 

리액트에서 state와 props를 통해 상태 관리를 하고 상위 컴포넌트에서 하위 컴포넌트로 인자들을 넘겨주었는데,
만약 컴포넌트 중첩이 100만 개라면 디버깅에도 불리하고, 관리에 어려움이 따른다.

 

그래서 Redux가 출현하게 되었고, 세 가지 원칙을 가진다.

 

Single source of truth

데이터를 한 곳에서만 관리한다.

 

State is read-only

리액트에서 setState()를 통해서 state를 변경했지만, Redux에서는 action이라는 객체를 통해 state를 변경할 수 있다.

 

Changes are made with pure functions

변경은 순수 함수로만 가능하다.(reducer로 가능하다!)

 

 

Store: 상태가 관리되는 오직 하나의 공간

 

컴포넌트들이 state에 관한 정보가 필요할 때 Store를 통해 받아올 수 있다.

 

Action: store에게 요청을 전달하는 역할

 

Reducer: 현재 상태와 Action을 이용해 다음 상태를 만들어 낸다.

** Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다!! 

---