redux를 공부해보려고 튜토리얼을 따라해 봤지만, 이해력이 달려서 그런지 개념이 잘 들어오지 않는다.
한 단계를 더 아래로 들어가서 보면 좀 더 이해가 쉬울 듯 해서 몇 가지 확인 작업을 해볼까 한다.
우선은 확인을 위한 기본 세팅부터 해야 겠다. index.html 부터 만든다. 기본 틀은 html5-boilerplate 로부터 만들면 되고, 여기에 redux CDN을 통해 스크립트를 로드하도록 한다.
작성한 html을 브라우저를 실행하여 오픈하고, F12 키를 눌러 console 탭으로 들어간다. 프롬프트 창에서 Redux라고 입력하면,
튜토리얼에서 봤던 몇 가지 함수들이 보인다. createStore을 실행해봐야겠다.
Redux.createStore()
redux.js:123 Uncaught Error: Expected the reducer to be a function.
at Object.createStore (redux.js:123)
at <anonymous>:1:7Redux.createStore()라고 입력하니, reducer가 필요하다는 것을 알았다.
reducer는 설명대로라면, 현재 상태와 action을 받아서 새로운 상태를 넘겨주는 역할을 한다라고 되어 있다.
console 창에서 입력하는 것은 상당히 불편하다. 가장 간단한 형태로 reducer를 rootReducer를 정의하고 Redux.createStore()의 파라메터로 넘겨봤다.
createStore()에서 리턴된 객체 내에 익숙한 함수들이 보인다. dispatch, getState 를 좀 더 살펴볼 필요가 있을 것 같다. 앞서 html 파일에 inspect.js 파일을 포함시켰던 것은 중간 단계의 확인한 내용을 보관하기 위해서였다. 지금이 중간단계를 저장해 둘 시점이다. store라는 상수에 생성한 store를 담아둔다.
function rootReducer(state, action) {
return state;
}const store = Redux.createStore(rootReducer);
다시 html을 로드하면, console 화면에서 store로 Redux.createStore() 결과를 접근할 수 있다.
console에서 store.getState()라고 입력하면, undefined 가 출력된다. reducer에서 뭔가가 제대로 리턴이 되지 않는 것이 예상된다. state의 디폴트 값을 지정하도록 rootReducer를 수정한다.
const initState = {}
function rootReducer(state = initState, action) {
return state;
}다시 html을 로드한다. 이제는 store.getState()를 입력하면 빈 오브젝트를 리턴하는 것을 확인할 수 있다.
이 state 값은 initState 로부터 온 것은 확실한데, store에 업데이트하기 위해서는 분명히 rootReducer()가 호출되었을 것이다. rootReducer()에 로그를 출력하도록 살짝 수정하고 html을 재실행한다.
function rootReducer(state = initState, action) {
console.log({ state, action });
return state;
}
createStore()를 호출할 때, 최초의 action이 “@@redux/INITw.k.w.3.5.6” 이라는 type 값으로 넘어온다는 것을 확인할 수 있다.
결론
글이 장황해지고 있어서 일단 여기에서 끊고 정리해보는 것이 좋을 것 같다. redux의 store를 생성하기 위해서는 reducer를 필요로 한다. reducer는 현재의 상태와 action을 받아서 새로운 상태를 만들어주는 역할을 한다. reducer 의 최초의 상태와 action은 store를 생성할 때, 호출이 된다. 디폴트 state 는 reducer의 디폴트 인자값에 의해, action은 redux 자체의 초기화를 위한 action값으로 해서 넘어온다.
