TIL : Redux
1. Redux
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 (https://ko.redux.js.org/)
=> 컴포넌트가 1~2개라면 우리는 쉽게 상태관리를 할 수 있을 것이다. 그러나 실제 앱이나 웹사이트에서는 수많은 컴포넌트가 있기 때문에 react만으로는 비효율적이다. 그래서 효율적으로 쉽게 상태관리를 하는 라이브러리인 Redux가 등장했다.
2. Redux 개념정리
· Store : 상태가 관리되는 오직 하나의 공간
=> getState()를 통해 상태에 접근, dispatch(action)을 통해 상태 수정, subscribe(listener)를 통해 리스너 등록
const store = createStore(reducer); /
· Action : 상태의 변화가 필요할 때 액션을 발생시킨다. (액션은 하나의 객체, type은 필수로 지정, 그 외는 선택)
const ADD_TODO = 'ADD_TODO'
{
type: ADD_TODO, // 반드시 type이 존재, 나머지는 자유
text: 'Redux'
}
// 액션 생성자
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
· Reducer : 현재 상태와 Action을 이용해 다음 상태를 만든다. (리듀서의 인자는 이전 상태와 액션 순서대로 두 개이다.)
· combineReducers : 모든 리듀서들을 한 곳에 모아 객체로 만든다.
import { combineReducers } from "redux"; // 모듈 불러오기
import settingReducer from "./setting"; // 리듀서1
import videoReducer from "./video"; // 리듀서2
import searchReducer from "./search"; // 리듀서3
export default combineReducers({
searchReducer,
settingReducer,
videoReducer,
});
※ 전체 흐름 : Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 State를 생성한다.
3. Redux의 3가지 원칙
· Single source of truth : 하나의 저장소(store)가 존재한다. 이 저장소에는 애플리케이션의 모든 상태들이 객체 트리 구조로 저장되어 있다.
· State is read-only : state는 읽기 전용이다. 읽기 전용 상태를 변화시키려면 action 객체를 전달해야 한다.
· Changes are made with pure functions : action으로 상태 트리를 변경시킬 때 순수함수인 reducer를 작성해야 한다.
4. Redux의 장점
1. 상태를 예측 가능하게 만들어준다.
2. 유지 보수
3. 디버깅에 유리하다. (action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.