Redux란 ?
JavaScript App을 위한 예측가능한 state container이다, React 뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 등 다양한 framework와 작동된다.
그렇다면 왜 Redux가 필요한 걸까?
React에서 컴포넌트 개발을 할 때 컴포넌트는 Local State 를 가지게 되고, App은 Global State를 가지게 된다.
따라서 특정한 상태를 관리 할 때에 최상의 부모 컴포넌트에서 state를 선언하고 컴포넌트의 props를 이용해 상태를 전달하여 프로젝트를 관리했었다.
단일 페이지 애플리케이션(SPA)의 컴포넌트 숫자가 많아지고 상태관리가 복잡해져 대책으로 나온 것이 바로 Redux이다.
Redux는 state를 하나의 공간 Store에서 관리하게 되어 보다 상태를 관리하기에 이점이 있다.
Redux 개념
Redux의 세가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다, 이말은 즉, 데이터를 저장하는 Store라는 공간이 있음을 말한다.
2. State is read-only
Redux에서는 action 이라는 객체를 통해서만 state를 변경 가능하다.
3. Changes are made with pure function
변경은 순수 함수로만 가능하다 reducer와 관련이 있다.
Store
상태가 관리되는 오직 하나의 공간
컴포넌트가 상태에 접근할떄에 store에 접근해야 접근가능하다.
Store는 Redux에서 오직 하나의 공간이며, 컴포넌트들에서 state가 필요할때 Store에 접근하여
state 정보를 가지고 올 수 있다.
Action
자바스크립트 객체이며, 그 객체안에 타입을 비롯한 다양한 데이터들이 담긴다.
Store에게 애플리케이션에 데이터를 운반을 하는 역할을 한다.
Action객체는 어떤 형태의 액션이 행해지는 Type 필드를 꼭 가지고 있어야하고 타입은 문자열로 적어준다.
{
type: "액션의 종류를 한번에 식별할 수 있는 문자열 혹은 심볼",
payload: "액션의 실행에 필요한 임의의 데이터",
}Reducer
현재 상태와 Action을 이용해 다음 상태를 만들어 냄
Store에 Action에 있는 데이터를 운반을 할떄에 Reducer를 거처서 가야된다.
Action 객체가 Dispatch에 전달되고, Dispatch는 Redcuer를 호출해서 새로운 state를 생성한다.
type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any