Redux의 핵심은 store다.
store에 정보가 저장된다. => 글목록, 현재 글 등의 정보 등
그리고 실제 정보는 store의 state에 저장되는데, 이 state에는 직접 접근하는 것이 금지되어있다.
store을 만들면서 reducer라는 함수를 만들어 공급해주어야한다.
let store = Redux.createStore(reducer)Redux.createStore로 store을 생성할 수 있고, 여기의 인자가 reducer가 들어가는데 이 reducer은 함수이다.
fuction reducer(oldState,action){
// ...
}reducer를 작성하는것이 핵심이라고 할 수 있다.
그리고 추가로 store에는 포함되어있지 않지만 우리가 추가로 짜야할 코드인 render 부분이 있다
store의 state에 직접 접근하는것이 불가능하기에 그 앞에 거쳐가는 세가지의 함수가 있다.(dispatch(),subscribe(),getState())
getState()
state값을 가져오고 render에 전달
render라는 것은 state값을 참조해 ui를 만드는 아이이다!!
subscribe()
store의 state값이 바뀔때마다 render를 호출할 수 있다.
이렇게 되면 state가 바뀔때마다 ui가 갱신된다.
dispatch()
이 아이는 먼저 reducer를 호출해 state값을 바꾼 뒤,
이 작업이 끝나면 subscribe를 이용해 화면을 갱신해준다.
이때 dispatch를 통해 보낸 데이터는 action이라고 한다.
여기서 reducer는 state를 입력값으로 받고 action을 참조하여 새로운 state값을 만들어 가공해 return해주는 가공자이다.
=> reducer의 return값이 새로운 state가됨.(reducer를 통해 state값을 변경한다.)즉, state값 변경 일어난것. 따라서 render다시 호출됨..
dispatch가 subscribe에 등록되어있는 것들을 다 호출.
그러면서 render가 일어나고, getState로 가서 state를 가져온다음 render가 화면을 갱신,, 새로운 state에 맞게 ui가 바뀌게 된다.
리덕스를 쓰면 좋은이유
필요한 부품 수가 줄어듬,
redux-dev-tools를 사용하면 이전의 변화들로 돌아갈 수 있음
- 중앙 집중적인 데이터store를 통해서 애플리케이션을 쉽게 개발할 수 있다.
- 시간여행이 가능하다.
