Redux

생활코딩의 Redux 강의를 보며 공부한 내용을 정리한 글입니다.

 

Redux : 자바스크립트로 만든 애플리케이션을 위한 예측 가능한 상태의 저장소

 

Redux(리덕스)의 핵심은 store다. store는 정보가 저장되는 곳으로, 애플리케이션에서 글 목록의 정보, 현재 선택한 글에 대한 정보와 같은 것들이 저장된다. store 안에는 state라고 하는 실제 정보가 저장된다. 사용자는 직접적으로 state를 제어할 수 없고, 반드시 state를 제어할 수 있는 함수를 이용해야 한다. 그래서 store에는 state와 관련된 일을 하기 위한 dispatch, subscribe, getState라고 하는 세 가지 중요한 함수가 있다.

 

먼저, store를 생성할 때는 Redux에서 제공하는 createStore라는 함수를 이용한다. ({1})

store를 만들 때는 reducer라는 함수를 만들어서({2}) 공급해줘야 한다.

리듀서(reducer)는 변화를 일으키는 함수로, 현재의 상태(state)와, 전달 받은 액션(action)을 참고하여 새로운 상태를 만들어서 반환한다.

function reducer(state, action){ // {2}
  //...
}
var store = Redux.createStore(reducer) // {1}

이미지 출처 : 생활코딩

그림에서 render는 UI를 만들어주는 역할을 하는 함수다. 코드를 보면 getState를 통해 store에서 state를 가져오고, 그것을 이용해 화면에 보이는 웹페이지를 만들어준다. 즉, 현재의 state를 반영한 UI를 만들어준다.

subscribe는 state의 값이 바뀔 때마다 render함수를 호출해서 UI를 갱신해주기 위해 사용하는 함수다. subscribe 함수에 render 함수를 등록해두면 state의 값이 바뀔 때마다 render 함수가 호출되면서 UI가 갱신된다.

store.subscribe(render); // subscribe에 render함수를 등록하면 state가 바뀔 때 마다 render가 호출된다

 

다음으로 살펴볼 함수는 dispatch다. 

그림에서는 submit 버튼을 클릭하면 dispatch에 action 객체를 전달해서 실행하게 되있다. action은 상태에 변화를 일으킬 때 참조할 수 있는 객체이며, 반드시 type이라는 속성을 가지고 있다.

 

dispatch는 두 가지 역할을 한다.

1. 리듀서를 호출해서 state의 값을 바꾼다.
2. 그 후 subscribe를 이용해서 render 함수를 호출해준다. (그로 인해 화면이 갱신된다)

dispatch는 리듀서를 호출한다. 이때, 리듀서에게 현재의 state 값과 action 데이터를 전달한다. 사용자는 action객체만 dispatch의 파라미터로 넣어서 전달하고 state는 자동으로 전달된다. 그러면 리듀서는 action의 type에 따라 대응하는 로직을 미리 준비해두었다가, 전달받은 action의 type을 참조하여 새로운 state를 만들어서 반환한다. 리듀서가 새로운 state값을 반환한다는 것은 state 값이 변경된다는 뜻이므로 render가 다시 호출되어야 하는데, dispatch가 바로 그 역할까지 해주는 것이다.

 

정리하면, dispatch는 리듀서를 호출해서 state의 값을 바꾸고, state가 변경되면 subscribe에 등록된 모든 함수를 호출한다. 이때 render가 호출되어 새로운 state를 참조한 화면이 나타나게 되는 것이다.