Skip to main content

리덕스 기초 3 (~Store)

스토어(Store)란?#

  • 액션과 리듀서과 함께하는 곳

    • 어플리케이션 스테이트를 갖고있음
    • getState()를 통해 접근
    • dispatch(action) 로 업데이트
    • subscribe(listener) 함수로 리스너들을 등록 가능
    • 위 함수(subscribe())에 의해 반환된 함수는 리스너들의 등록해제를 다룬다.
  • createStore()

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)
  • createStore()의 두번째 인자는 초기 상태
  • 서버에서 실행중인 리덕스 어플리케이션의 상태와 클라이언트의 상태를 맞추기 위해 상태를 하이드레이팅(hydratnig) 하는 데 유용하다.
const store = createStore(helloApp, window.STATE_FROM_SERVER)

디스패치 액션#

  • 잘 돌아가는지 확인.

based on the todo#

import {
addTodo,
toggleTodo,
setVisibilityFilter,
VisibilityFilters
} from './actions'
// 초기 상태
console.log(store.getState())
// 바뀔 때마다 출력
// subscribe()는 등록 해제를 위한 함수를 리턴한다.
const unsubscribe = store.subscribe(() => console.log(store.getState()))
// 액션 디스패치
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))
// 상태 업데이트를 멈춘다.
unsubscribe()

img

Source Code#

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)