1. 리덕스란?

• Javascript app을 위한 예측가능한 state container 라이브러리
• 어플리케이션의 state를 관리하기 위한 오픈소스 자바스크립트 라이브러리이다.

2. 리덕스가 필요한 이유

🔹 MVC 구조와 FLUX구조

◼ MVC 구조

리덕스가 등장하기 전 데이터흐름의 방향은 MVC구조였다.

• Model : 데이터 관리
• VIew : 코드가 보여지는 부분
• Controller : 변화하는 데이터를 담당

이런 데이터 흐름은 양방향 데이터 구조 이다. State가 발생할 경우 Model, view, Controller 부분이 다 변하는 복잡한 흐름방향을 갖고 있다. 그래서 복잡한 프로젝트나 웹사이트들은 state 들의 변화가 많기 때문에 양방향 데이터흐름은 개발자들에게 큰 불편함을 느끼게 했다.

그래서 이런 문제점을 해결하기 위해 페이스북이 단방향 데이터 구조인 FLux를 개발하게 되었다.

◼ Flux 구조

• Action : 상태를 변경할 수 있는 명령어 카드같은 존재. 액션 생성자는 새로 발생한 액션의 타입과 데이터 페이로드를 액션 메세지로 묶어 디스패쳐로 전달.
• Dispatcher : 액션 메세지를 감지하는 순간 각 스토어로 전달. 콜백함수로 이루어 지며, 등록되어 있는 모든 스토어에 전달할 수 있음.
• Store : 어플리케이션의 상태와, 상태를 변경할 수 있는 메서드를 갖고있음. 어떤 타입의 액션인지에 따라 메서드를 다르게 적용해 상태를 변경
• View : React에 해당하는 부분. 변경된 데이터를 가져와 모든 자식뷰들에게 전달.

  🔹 Redux (Reducer + Flux)

  Redux는 Flux 패턴을 좀 더 쉽고 정돈된 형태로 쓸 수 있게 도와주는 라이브러리 이다. FLux와 다른점은 리덕스에서는

  1. Dispatcher의 개념이 없다. 리듀서가 dispatcher와 store 의기능을 담당한다. 각 리듀서는 서로 의존할 수 없고, 고립되어 있다.
  2. Root의 하나의 store만 존재한다.

Reducer의 기본개념 : 3가지 원칙

1. Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가져옴. 하나뿐인 store 데이터 공간
2. State is Read-only
- action이라는 객체를 통해서만 상태를 변경할 수 있음
3. Change are made with pure functions
- 변경은 순수함수로만 가능함.
- Store - Action - Reducer