[Redux] Redux 기초 - 생활코딩

action을 통해 action을 dispatch에 전달하고 
reducer가 state값을 갱신하고 
dispatch가 subscribe하고있는 함수들을 호출해
state값을 참조하여 UI를 바꿔줌

state

type State = any

• 저장소(store)에 의해 관리됨
• getState()에 의해 반환되는 하나의 상태값

action

type Action = Object

• 어떤 작업을 할지 설명해주는 자바스크립트 순수 객체
• store에 데이터를 넣는 유일한 방법
• UI 이벤트에서 왔든, 네트워크 콜백에서 왔든, 웹소켓과 같은 다른 소스에서 왔든 모든 데이터는 액션으로써 보내짐

reducer

type Reducer<S, A> = (state: S, action: A) => S

• 누적값과 값을 받아 새로운 누적값을 반환하는 함수
• 값들의 컬렉션을 받아 하나의 값으로 줄이는데 사용
• 자바스크립트의 Array.prototype.reduce()에 해당
• 누적값 : 상태 객체, 누적될 값 : 액션
• 주어진 이전 상태와 액션에서 새로운 상태를 계산
• 같은 입력이 있으면 같은 출력을 반환하는 순수함수
• API호출을 리듀서 안에 넣지 말것

dispatch

type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any

• 액션이나 비동기 액션을 받는 함수

 

실습 - github repository

https://github.com/yuiseo/study_redux

GitHub - yuiseo/study_redux