React Redux

redux 기초

flux

• facebook에서 고안한 어플리케이션 아키텍쳐
  flux 아키텍쳐 특징: 단방향 데이터 흐름

Action → Dispatcher → Store → View
→ Action →↑

redux

• Redux = Reducer + Flux
• 모든 전역 state를 하나의 거대한 object에 모두 담음

action

• javascript 객체이며, type 필드를 필수적으로 가지고 있어야 한다
  payload 필드에 데이터 넣기 (옵셔널)

{ 
  type: "ADD_TODO", 
  payload: { 
    id: 0, 
    text: "리덕스 배우기" 
  }
}

reducer

• flux 아키텍쳐 중 dispatcher를 대체한다
• 현재 state와 들어온 action을 이용하여 다음 state를 결정하는 순수함수
  (순수함수: 동일한 인자가 들어갈 경우 항상 같은값이 나오길 보장된 함수)

store

• 하나의 object
  context와 다르게 객체 일부가 바뀌었을 때 바뀐 값에 대해서 watch하고 있는 컴포넌트만 re-render 할 수 있는 훅을 제공하기 때문에 가능하다
• store가 처음 생성될 때 INIT action을 reducer에게 전달하여 초기 state를 저장한다

react-redux

• Context를 통해 store에 접근
• Context api 와 동일하게 Provider로 store 전달
• Context와 차이점
  -> store는 reference type이며 update하지않을것 (리렌더 X)