Redux

1. Design Pattern

MVC (Model - View - Controller) 1979년도

Model - data (백엔드)
View - UI
Controller - 관리하고 있는 상태들, 백엔드에서 받아오는 것, UI 컴포넌트들

관심사 분리로 코드의 단순화 및 유지보수의 더 높은 수준의 자유

모든 뷰는 컨트롤러를 통해 제어된다

Flux

2. 단방향 데이터흐름만 따라갈 수 있게 Redux

전역상태관리 라이브러리

action : 내가 무슨 행위를 , 이렇게 변화할거야 라는 것을 정의 -> 역할은 제한되어있음
dispathcer : 데이터를 '전달'해주는 역할

-> 기본 React의 기능만으로 대응하기 힘들 정도로 애플리케이션의 상태 관리가 복잡해졌다고 확실히 판단이 되었을 때 리덕스를 사용하자.

리덕스를 쓰는 3가지 원칙
1) 하나의 저장소 안에 하나의 객체 트리 구조로 저장
3) 변화는 순수 함수로 작성
ex) fetch함수,
ex) 외부에서 데이터를 받아오는 것은 순수함수가 아니다.

let a = 1;
const dataA = ()=>{
a + 
}

view-> action

원래 서로의 컴포넌트들은 자신의 상태가 변경되었을때, 자신에게 의존하고 있는 다른 컴포넌트들에게 그것을 직접 알려줘야 했다. 하지만 redux를 사용하게 되면 모든 컴포넌트들이 랜더링 될때 필요한 데이터를 담고 있는 state를 만들고, 만약 action을 전달하여 reducer를 통해 state가 변경되게 되면 모든 컴포넌트들에게 state가 변경되었음을 알리고 state가 변경됨에 따라 subsctibe에 포함되어있는 함수들이 실행되면서 컴포넌트들이 재랜더링되기 때문에 컴포넌트들간의 의존성이 낮아지고 컴포넌트들은 각자 자신의 상태에만 집중할 수 있게 된다.

React-Redux

1. install redux reaxt-redux
2. index.js -> createStore 임포트 , Provider
3. <App/ >을 Provider로 감싼다.
5. 리덕스 폴더 안에 index.js 생성 : 전역상태 관리하는 곳
6. 리덕스 폴더 안에 counter.js 생성 : 전역상태 관리하는 곳
   -> action 넣기 : 상수
   -> action creator 넣기 : 함수
   -> Reducer 생성 : 함수