👉 https://github.com/happypoulp/redux-tutorial/wiki

Tutorial 03 - simple reducer

어떻게 애플리케이션의 상태를 보관할 Redux 인스턴스를 생성하는지 배웠다. 이제 이 상태를 변경하는 리듀서 함수들에 집중해보자.

reducer VS store:

알아차렸을 지 모르겠지만, 처음 소개할 때 보여준 flux 다이어그램에서 Redux의 “Reducer”가 아닌 “Store” 가 있었다. 이 두개는 어떻게 다른걸까? 생각보다 쉽다: Store는 Reducer 와 다르게 데이터를 보관한다. 그래서 flux에서 Store는 상태를 보관하고 있지만 Redux에서는 매번 reduce가 호출된다. 상태가 갱신되어야할 때마다 reduce에 전달되는 것이다. 이런식으로, Redux의 상태는 상태가 없는 store(stateless store)가 되고 이걸 reducer 라고 부른다.

이전에 말한대로, Redux 인스턴스를 생성할 때 reducer 함수를 전달해야한다.

import { createStore } from 'redux'

var store_0 = createStore(() => {})

… 이렇게 Redux는 액션이 발생할 때마다 애플리케이션 상태에대해 이 함수를 호출하게된다. reducer를 createStore에 전달하는 게 01_simple-action-creator.md 에서 말했었던 Redux에서 액션 “핸들러”를 등록하는 방법이다.

reducer 에 로그를 심어보자.

var reducer = function (...args) {
    console.log('Reducer was called with args', args)
}

var store_1 = createStore(reducer)

// Output: Reducer was called with args [ undefined, { type: '@@redux/INIT' } ]

어떤가? 우리가 아무런 액션을 dispatch하지 않았는데도 reducer가 호출되었다… 애플리케이션의 상태를 초기화해야하기 때문이다, 사실 Redux는 초기 액션을 dispatch 한다. ({ type: '@@redux/INIT' })

호출되게되면, reducer는 이런 파라미터를 받게되는데: (state, action) 이건 애플리케이션 초기화에서 매우 논리적이다. 상태는 아직 초기화되지 않았기 때문에 “undefined” 이다.

그렇지만 Redux가 “init” 액션을 보내고 나서 애플리케이션의 상태는 무엇이될까?

다음: 04_get-state.md