Skip to main content

데이터 흐름 (Data flow)

리덕스 앱의 데이터 라이프 사이클#

1. store.dispatch(action) 을 호출#

  • 참고: 액션은 무슨 일이 일어났는지를 설명하는 plain 오브젝트입니다.
{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }

2. 스토어가 리듀스를 호출#

// 현재 앱 상태
let previousState = {
visibleTodoFilter: 'SHOW_ALL',
todos: [
{
text: 'Read the docs.',
complete: false
}
]
}
// 액션이 수행됨
let action = {
type: 'ADD_TODO',
text: 'Understand the flow.'
}
// Your reducer returns the next application state
let nextState = todoApp(previousState, action)

3. 루트 리듀서에서 여러 리듀서들의 결과들을 조합하여 싱글 스테이트 트리로 만든다.#

  • combineReducers()라는 헬퍼 함수가 있다.
  • 이것도 전 단계에서 했던 내용들이다.

4. 리덕스 스토어가 완성된 스테이트 트리를 루트 리듀서로부터 반환받아 저장한다.#

  • store.subscribe(listener) 로 invoke
  • store.getState() 현재 상태 겟

::: warning 어느 정도 숙련된 유저들에게

advanced tutorial 항목의 async flow를 살펴보기. middleware가 async actions으로 어떻게 변하는지 배우자. :::