-
Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리,
자바스크립트에서 사용할 수 있는 스테이트 컨테이너 -
액션은 무엇이 update될지 나타내는 평범한 객체 형태
-
reducer를 통해 액션에 따라 상태의변화를 수정
-
필요한 정보, 순수한 객체를 store에 보낸다
상태 관리 라이브러리가 왜필요한가?
: 프로젝트의 규모 크고 복잡한 경우 컴포넌트간의 상태 교환이 많아 관리하기 어려운 상태가 될 수 있다. 이러한 문제를 해결 하기위해 쓰는것이 바로 상태관리 라이브러리.
Redux에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징?
-> 액션은 무엇이 update될지 나타낸다
-> reducer를 통해 액션에 따라 상태의변화를 수정
-> 필요한 정보, 순수한 객체를 store에 보낸다
Redux의 장점
- 상태를 예측 가능하게 해준다
- 유지보수가 좋다
- 디버깅에 유리하다
- 테스트하기 쉽다
- 애플리케이션을 특정 상태로 한번에 전환하는 것이 가능하다
- 어떠한 컴포넌트도 어떤 상태든 접근이 가능하다
- Searialize 후 서버 등으로 전송하기 쉽다
- 상태의 이력(history)를 관리하기에 용이하다
- 상태와 UI를 분리해서 테스트할 수 있다
3가지 원칙, 개념
-
진실은 하나의 원천으로부터
: 애플리케이션의 모든 state는 하나의 store안에 하나의 객체 트리구조로 저장된다
이를통해 universal application(하나의 코드 베이스로 다양한 환경에서 실행)을 쉽게 만들수 있다
하나의 state 트리만 가지고 있기 때문에 디버깅에도 용이. -
state는 읽기전용
: state를 변경시키는 유일한 방법은 액션(변경) 객체(내용)를 전달하는 방법뿐이다
이를통해 뷰나 콜백에서 state를 직접 바꾸지 못한다는걸 보장 받는다. 액션 객체는 그저 평범한 객체이기때문에 기록, 저장, 시리얼라이즈, 이후 테스트나 디버깅을 위해 재현도 가능 -
state 변화는 순수 함수로 작성되어야 한다
: 순수리듀서로 액션에 의해 상태트리가 어떻게 변화하는지 지정
리듀서는 이전상태와 액션을 받아 다음 상태로 반환.
이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야한다
Redux의 리듀서
애플리케이션의 상태가 어떻게 바뀌는지 특정하는데 도움을 준다
이전 상태와 액션을 받아서 다음 상태를 반환한다
- 초기값이 있고, 새로운 상태 객체를 리턴
- 기존 상태 객체는 변경하지 않는다. Immutable
- 기존 state 변경하지 않는다
- side-effect가 없는 순수 함수이다
리듀서에서 금지해야되는 사항 :
- 인수들을 변경
- API호출이나 라우팅 전환같은 사이드이펙트
- Date.now()나 Math.random() 같이 순수하지 않은 함수 호출
Store(스토어)
스토어의 기능
- 애플리케이션의 state 저장
- getState()를 통해 state 접근
- dispatch(action)를 통해 상태 수정
- subscribe(listener)를 통해 리스터 등록
- 리덕스 애플리케이션에서 단하나의 스토어만 가질수 있다
- 데이터를 다루는 로직을 쪼개고 싶다면 리듀서 조합을 사용
