Redux

🔥 Redux

: 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너

Redux의 구조

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

=> Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐른다.

Redux Hooks

: React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드 제공
그 중 useSelector(), useDispatch() 이 두 가지의 메서드를 기억하면 됩니다.

• useSelector()
  : Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드

• useDispatch()
  : 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드

Redux의 세 가지 원칙

1. Single source of truth

: 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미
=> Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙

2. State is read-only

: 상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미
=> Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙

3. Changes are made with pure functions

: 변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙

---

+ 레퍼런스 링크
robinwieruch 블로그: Redux
What is Redux? / Basics in Redux without React를 참고하면 좋습니다.
FLUX 패턴 공식 문서