[Redux] Redux 기본

20210405 기록

Redux

→ 자바스크립트 앱에서 예측가능한 상태를 관리

• 각 컴포넌트간에 데이터를 주고받을 때, 부모 컴포넌트를 통해서 주고 받았었다.
  → 자식이 많아지면 상태관리가 엄청나게 복잡해진다.
• 이런 복잡성을 관리하기 위해 Redux를 사용할 수 있다.

Redux의 세 가지 원칙

1. Single source of truth
   • 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.
   • 데이터를 저장하는 store라는 하나뿐인 공간이 있다.
2. State is read-only
   • React에서도 setState라는 메소드를 활용해야만 변화가 가능
   • Redux에서는 Action이라는 객체를 통해 변경 가능
3. Changes are made with pure functions
   • 변경은 순수함수로만 가능하다. → Reducer와 관련된 개념

Store

• 상태가 관리되는 오직 하나의 공간
• 컴포넌트들과 별개의 공간에 앱에서 필요한 state를 두고,
• 컴포넌트에서 state 정보가 필요할 때 Store에 접근

Action

• 객체 안에 타입을 비롯한 다양한 데이터들이 담긴다.
• Store에 앱의 데이터를 운반해주는 형태

{
	type: "ORDER",  // type은 필수
	drink: {
		menu: "Americano",
		size: "Grande",
		iced: false
	}
}

Reducer

• Action을 통해 앱의 데이터를 Store에 옮길 때, Reducer를 거쳐서 가야 한다.
• Action 객체는 Dispatch 메소드에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state 생성
• 데이터가 한 방향으로 흘러야 하기 때문에

Redux의 장점

1. 상태를 예측 가능하게 만들어 준다.
2. 유지보수에 용이하다.
3. 디버깅에 유리하다.(action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.