오늘 배운 것

Redux Basic 2/2

아래 문서는 Redux 공식문서를 바탕으로 공부한 내용을 정리한 것이다.

4. Store

Store는 Action과 Reducer를 가져와 작업하는 객체이다.

Redux 애플리케이션에는 단 하나의 스토어만 존재한다.

//스토어 만들기
//addText이 text를 받아 Action을 만들어내는 생성자라고 가정하자.

import { createStore } from 'redux'
import addText from './reducers'

let store = createStore(addText)
//Reducer를 인자로 받는 createStore 메소드로 Store 생성 

store.dispatch(addText('Learn about actions'))
store.dispatch(addText('Learn about reducers'))
store.dispatch(addText('Learn about store'))
console.log(store.getState())

//dispatch 메소드를 통해 Store의 State를 수정할 수 있다.
//getState 메소드를 통해 Store의 State를 확인할 수 있다.

• 스토어는 다음과 같은 일들을 할 수 있다.
  1. 애플리케이션의 State를 저장한다.
  2. getState() 메소드를 통해 State를 받아오고,
  3. dispatch(action)을 통해 State를 수정한다.
  4. subscribe(listener)를 통해 Listener를 등록한다.

5. Data Flow

모든 Redux 앱의 데이터는 아래와 같은 4단계의 생명주기를 따른다.

1. store.dispatch(action)을 통해 action을 store로 보낸다.
2. store가 지정한 reducer 를 호출한다.
3. root reducer가 (하위 reducer가 존재한다면 각 리듀서의 출력을 합쳐) 새로운 state를 만든다.
4. store가 root reducer에 의해 반환된 새로운 state를 저장한다.