리덕스 기초 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()

Source Code

import { createStore } from 'redux'

import todoApp from './reducers'

const store = createStore(todoApp)