1. Redux

리덕스란?

 

리덕스 공홈에선 리덕스를 이렇게 설명하고 있다.

 

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경에서
작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다.

 

이게 무슨소리...?? 그냥 쉽게

데이터를 중앙집권화를 시켜서 데이터 사용 및 관리를

편하게 만들어주는 라이브러리 라고 생각하면된다.

 

---

 

Redux에는 3가지의 원칙이 있다.

 

1. Single source of truth

• 동일한 데이터는 항상 같은곳에서 가지고 온다.
• 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미

2. State is read-only

• 리액트에서는 setState 메서드를 활용해야만 상태변경이 가능
• 리덕스에서도 액션이라는 객체를 통해서만 상태변경이 가능

3. Changes are made with pure functions

• 변경은 순수함수로만 가능
• 리듀서와 연관되는 개념
• Store - Action - Reducer

---

 

그럼 Store, Action, Reducer가 뭘까??

 

 

1. Store(스토어)

 

Store(스토어)는 상태가 관리되는 오직 하나의 공간

 

• 컴포넌트와는 별개로 스토어라는 공간이 있고,
  그 스토어 안에서 앱에서 필요한 상태를 담는다.
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근

 

 

2. Action(액션)

 

Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다.
Action(액션)은 자바스크립트 객체 형식

{
  type: "Action_CHANGE_USER",  // 필수
  payload: {  // 옵션
    name: "승현",
    age:25,
  }
}

 

 

3. Reducer(리듀서)

 

• Action(액션)을 Store에 바로 전달하는 것이 아니다.
• Action(액션)을 Reducer(리듀서)에 전달해야한다.
• Reducer(리듀서)가 주문을 보고 Store의 상태를 업데이트 하는것
• Action(액션)을 Reducer(리듀서)에 전달하기 위해서는
  dispatch() 메서드를 사용해야한다.

 

---

 

Flux 패턴

 

Flux 패턴은 큰 애플리케이션에서 데이터 흐름을

일관성 있게 관리함으로써 프로그램의 예측가능성을 높이기 위해 만들어졌다.

 

기존에 사용하던  MVC패턴은 데이터가 양방향으로 흐를 수 있는데,

아래와 같이 규모가 큰 애플리케이션에서는

서로가 서로를 업데이트 시켜주기때문에 매우 복잡한 데이터 흐름을 가지게된다.

 

 

이러한 문제를 해결하기 위해 Flux패턴을 생각해 낸것이다.

 

 

Flux패턴은 각 요소들을 하나씩 순서대로 살핀다.

 

 

각 요소들은 단방향 흐름에 순서대로 역할을 수행, View로부터

새로운 데이터 변경이 생기면 처음부터 다시 순서대로 진행하기 때문에

예외없이 데이터를 처리할 수 있다.