전역 상태 관리 라이브러리
Model, View, Controller
Flux
개발Flux
는 단방향!자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
Action
: 명령Dispatcher
: 명령 전달Store
: 저장소View
: 화면 UI진실은 하나의 소스로부터
상태는 읽기 전용
dispatch
호출Dispatch
가 호출된 순서대로 상태를 변경하여 변경된 순서와 내역 쉽게 관리Action
객체는 평범한 자바스크립트 객체이며, 이 객체가 Store
에 입력된 순서와 내용을 저장해두면 나중에 그 과정을 쉽게 재현 가능변화는 순수 함수로 작성
순수 함수: 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수
fetch
등의 비동기 로직, new Date()
, Math.random()
은 같은 input에 다른 return값을 주므로 유닛 테스트 불가!View
Action / Action Creator
Action
: 상태 변화에 대한 의도를 표현하는 단순한 자바스크립트 객체Action Creator
: Action
객체를 정해진 틀에 맞게 리턴하는 단순한 함수export const addCart = (item) => { // 액션 생성 함수
return {
type: "ADD_ITEM", // 액션 객체, 필수적으로 필요
payload: itme, // 전달할 데이터
};
};
Dispatcher
Action
객체를 Reducer
에 전달하는 역할을 하는 함수. store.dispatch(액션)
형태dispatch
함수는 반드시 동기적으로 처리되어야 한다.Reducer
reduce()
메서드처럼 값을 받아서 하나의 결과물로 줄인다.(previousState, action) => newState
의 형태의 순수함수이며 예측 가능해야 한다.Store
를 기반으로 새로 받은 Action
에 미리 준비된 로직을 처리하여 새로운 Store
를 리턴하는 함수Root Reducer
: 실제로 createStore
의 첫 번째 인자로 전달되는 함수. 유일하게 (state, action) => newState
형태의 로직을 가져야 한다.Slice Reducer
: 상태 트리의 일부분만 업데이트하는 리듀서. 여러 개가 결합되어 Root Reducer
가 된다.Reducer
내부에서 비동기나 순수하지 않은 로직(Side Effect) 처리 불가Store
Redux
앱 전체의 상태는 보통 깊게 중첩되어 있는 객체store
에서 관리되며 store.getState()
로 읽기 가능JSON
으로 변환 가능한 것들만 포함시키자미들웨어
redux-logger
, redux-thunk
, redux-saga
Redux
의 여러 기능들을 React의 API에 맞도록 감싼 UI Binding 라이브러리Provider
컴포넌트를 사용해 전역에 store 주입 (내부적으로 context API 사용)useSelector
, useDispatch
등 React 전용 hooks 제공Action Type
, Action
, Reducer
모두 하나의 파일 안에서 관리하는 패턴