1. Redux
Redux(리덕스)는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 입니다. 예측 가능한걸 강조하는 이유는, 프로젝트단위가 커지고 코드가 복잡해졌을 때 상태는 예측하기 어려웠기 때문입니다. 왜 어려웠냐면 데이터와 View가 많아지고 서로 의존하면서 데이터의 흐름이 양방향 혹은 예상치 못한 부분으로 흐를 수 있었기 때문입니다. Redux는 데이터가 단방향으로 흐르도록 설계한 Flux에서 영감을 받아 만들었고, 상태의 변화를 특정 함수에 의해서만 변할 수 있게 통제해 상태변화를 예측 할 수 있게 만들었습니다. Flux는 개념적인 디자인 패턴이고, Redux는 Flux 개념을 자바스크립트로 구현한 구현체 입니다.
2. Redux의 구조
2-1. 3가지 원칙 (Three Principals)
Redux는 지켜야할 3가지 원칙이 있습니다. 간단하면서 중요한 3가지 원칙만 지키면 리덕스를 이해하고 방황하지않는데에 큰 도움이 될 것입니다.
2-1-1. 진실은 하나의 소스로부터 (Single source of truth)
애플리케이션의 모든 상태(state)는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됩니다.
2-1-2. 상태는 읽기 전용이다 (State is read-only)
읽기 전용인 이유는 store에 직접 접근해서 state를 수정하지 않아서 읽기 전용입니다. state를 수정할 수 있는 유일한 방법은 무슨일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐입니다. 마치 setState 처럼 Dispatch함수에 액션객체를 담아서 보냅니다. 이렇게 상태를 업데이트하는 방식과 시점을 제한해서 상태가 언제 바뀌는지 예측 할 수 있습니다. 이렇게 업데이트를 제한하는 이유도 예측 가능하게 만들기 위함 입니다.
// 무슨일이 벌어지는지 묘사하는 액션객체를 전달하는 dispatch 예시
store.dispatch({
type: 'COMPLETE_TODO',
index: 1,
});
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED',
});Dispatch가 호출된 순서대로 상태를 변경해서 변경된 순서와 내역을 쉽게 관리할 수 있습니다. Dispatch가 전달하는 Action 객체는 평범한 자바스크립트 객체이며, 이 객체가 Store에 입력된 순서와 내용을 저장해두면 시간여행하듯(time travel) 이전의 상태값으로 돌아가 디버깅도 가능합니다.
2-1-3. 변화는 순수 함수로 작성되어야한다 (Changes are made with pure functions)
순수함수는 input을 받은대로 output이 나오는, 즉 반환되는 값이 어떻게 나오는지 예측하기 쉬운 구조 입니다. 리듀서는 이전 상태값과 액션 객체를 입력으로 받아 다음 상태를 반환하는 순수 함수 입니다. 액션에 의해 상태가 어떻게 변하는지 통제하기 위해 리듀서 를 작성해야 합니다. 이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야 합니다.
순수 함수는 테스트 코드를 작성하기도 쉽습니다. 입력대로 출력하기 때문입니다. 그래서 리듀서는 같은 상태태값과 액션 객체를 입력하면 항상 똑같은 다음 상태값을 반환합니다.
