Redux
MVC가 복잡해지면서 오는 버그. 페이스북은 이를 고치기 위해 flux architecture를 제안합니다.
Action- dispatcher - store - view의 순서로 데이터가 단방향으로 흐르기 때문에 아주 편리합니다.
한 개발자는 이를 바탕으로 Redux 라이브러리를 만듭니다.
Redux의 3가지 원칙
1. Single Source of Truth : 어플리케이션의 state를 위해 단 한개의 store를 사용합니다.
반면 flux는 여러개의 store를 사용합니다.
2. State is Read-Only
어플리케이션에서 store의 state를 직접 변경 불가능합니다.
State를 변경하려면 무.조.건. action이 dispatch 되어야 합니다.
3. Changes are made with pure Functions
action 객체를 처리하는 함수를 reducer라고 합니다.
reducer는 정보를 받아 상태를 어떻게 업데이트 할 지 정의합니다.
reducer는 순수함수로 작성되어야만 한다.
데이터베이스 / 네트워크 / 인수 변경 X -> 같은 인수 실행 함수는 같은 결과.
순수하지 않은 API 사용 불가. (Date.now(), Math.random())
핫리로딩과 시간여행
eject
프로젝트 설정 변경 원할 때 사용한다.
npm install redux react-redux
똑똑한 컴포넌트(smart component)와 멍청한 컴포넌트(dumb component)
똑똑 : state / function render / 라이프사이클 없다
멍청: state 있다.
Action
일을 발생시키는 부분
Reducer
변화를 일으키는 함수. 순수해야함. : 비동기 작업 x. 인수변경x. 동일한 인수=동일한 결과
이전 상태를 변경하는게 아니라 새로운 상태를 반환하는 것임!!!!
기존 상태를 복사하고 변화를 준 다음에 반환.
immutability
immutability helper를 쓰거나 es6 spread를 사용해서 유지
store
어플리케이션의 현재 상태를 지님
하는 일:
dispatch(action) : action을 reducer로 보낸다. 자신의 상태와 방금 전달받은 action 전달.
getState 현재 상태를 반환한다.
subscribe(listner) 상태가 바뀔 때마다 실행할 함수 등록
replaceReducer
react-redux
뷰레이어 바인딩 도구
Provider 컴포넌트에서 redux 서비스를 사용하도록 제공해준다.
<Provider store={store}>
<App />
</Provider>
connect
컴포넌트를 redux에 연결하는 함수를 반환.
옵션을 인수로 받고 전달 받은 옵션을 사용해서 컴포넌트를 redux에 연결하는 함수를 반환한다.
connect()(Counter)
store에 연결된 새로운 컴포넌트 클래스가 반환됨
connect(
[mapStateToProps], //State를 parameter로 가진다. 이를 해당 컴포넌트의 props로 연결
[mapDispatchToProps], //Dispatch를 parameter로 가진다. Dispatch함수를 props로 가진다.
[mergeProps], //state와 dispatch를 parameter로 가짐. 함수가 동시에 사용해야한다면 여기서!
[options] //[pure=true],[withRef=false]
//pure가 true로 설정되어있을 경우, 불필요한 업데이트를 하지 않는다. width
)