Redux

»

Redux

state는 자식이 많아진다면 상태관리가 복잡해짐 그래서 사용하는게 상태관리 라이브러리인 Redux

Redux의 세가지 원칙

  1. Single source of truth 같은 곳에서 동일한 데이터를 가지고 온다(데이터를 저장하는 스토어란 하나뿐인 공간이 있음
  2. State is read-only state를 변경하기 위해서는 action이라는 객체를 통해 state를 변경
  3. Changes are made with pure functions 변경은 순수함수로만 가능하다

Store

상태가 관리되는 단 하나뿐인 공간

Acton

자바스크립트 객체

타입을 비롯한 다양한 객체들이 담김

우리 애플리케이션에 데이터를 스토어에 전달해주는 역할

{
	type: 'order', // 타입은 꼭 넣어줘야댐
	drink: {
		menu: 'coffe',
		size: 'tall',
		iced: false
	}
}

Reducer

Action을 이용해 스토어에게 전달해줌

Redux%20d309eb7dd78f47268c272ba7f073a125/Untitled.png

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

데이터가 한방향으로만 흘러야하기에 이러한 공식을 사용하는 것

overview

Redux%20d309eb7dd78f47268c272ba7f073a125/Untitled%201.png

장점

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