Redux-1

1. 가장 큰 어려움은 복잡함이다. 이러한 코드의 복잡성을 어떻게 낮출 것인가?

2. 리덕스는 이 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측가능하게 만들어준다.

 

state란 상태.그냥 객체일 뿐. 데이터가 이곳저곳 흩어져있는 것보다 한곳에 묶여있는 게 훨씬 관리하기 쉽기 때문에 사용.

이렇게 단 하나의 state를 유지하는 것으로 어플리케이션의 복잡성을 낮춘다 

 

3. 리덕스의 특징

   1) Single Source of Truth - 1개의 상태

   2) 1개의 state에 모든 데이터를 넣는다.

   3) 인가된 담당자(특정 함수)를 통해서만 값을 수정한다. - 개발자가 직접 값을 수정할 수 없다.

      - reducer

      - dispatcher

 

4. 데이터를 가져 갈 때도 함부로 가져가지 못한다. 데이터를 아주 삼엄하게 관리한다!

   - 데이터를 외부에서 직접적으로 제어 할 수 없다.

   - 예기치 않게, state가 바뀌는 것을 사전에 차단하여서, 예측 가능하도록 한다.(중요)

 

5. state 값이 바뀔 때 마다 연락을 해서 데이터가 바뀌었으니, 자기가 해야할 일을 하도록 하라고 말해준다.

   - 각각의 애플리케이션은 서로에게 신경 쓸 필요 없이 자기 할 일 만 하면 된다.

 

6. Undo / Redo 를 쉽게 할 수 있다.

  - 값을 바꿀 때 원본을 직접 바꾸지 않음. 원본을 복제하고, 복제한 데이터를 수정해서, 새로운 원본으로 만드는 방법을 채택

 

7. 이전의 상태에 대해서도 디버깅을 할 수 있다.

 

8. 모듈 리로딩

코드를 작성하면 자동으로 어플리케이션에 반영되는 것 이상으로 진보된 기능을 보여준다.

어플리케이션을 새로 리로드가 되는데 데이터는 그대로 남아있기 때문에 다시입력 할 필요가 없도록 할 수 있다.

=> 목적은?

예측가능하고, 견고하고, 유연한 어플리케이션

 

그렇다면 리덕스는 언제 유용할까?

• 앱의 여러군데에 존재하는 어플리케이션 state의 양이 많거나
• 앱의 state가 자주 업데이트되거나
• state를 업데이트하는 로직이 복잡하거나
• 앱이 중간 또는 큰 사이즈의 코드베이스를 가지고 있으며, 많은 사람들에 의해서 이용되거나

할 때에 유용함.

 

redux store란?

A "store" is a container that holds your application's global state.

global state를 보관하는 장소.

 

위에서 말했듯 store 내부에 들어있는 state를 직접적으로 변경할 수 없다.

변경할 수 있는 유일한 방법은 액션을 발생시키는 것 뿐임. 액션을 발생시키면 dispatch가 store에게 액션이 발생했다는 것을 알려줌.

액션이 전송되면, store는 reducer 함수를 발생시키고 기존state과 액션에 근거해서 새로운 state를 계산한다.

결과적으로 store는 subscribers에게 해당 state가 업데이트 됐으니 UI가 새로운 데이터로 업데이트될 수 있다고 알린다.

일직선이다.

1. 컴포넌트에서 dispatch를 통해 action을 호출

2. action에 정의된 내용이 reducer에 의해 handling

3. store에 저장된 상태값이 update됨

4. update된 store의 state를 subscriber를 통해서 실시간으로 컴포넌트에서 사용