리듀서란?
액션에서 무언가 일어난다는 정보를 가져오면 그 결과 애플리케이션의 상태가 어떻게 바뀌는지 리듀서 에서 설계할수 있다.
리듀서는 애플리케이션의 모든 상태는 하나의 객체에 저장된다.
절대로 리듀서 내에서 하지 말아야 할 것들
- 인수들 을 변경(mutate)하기.
- API 호출이나 라우팅 전환같은 사이드이펙트를 일으키기.
- Date.new()나 Math.random()같은 순수하지 않은 함수를 호출하기.
**참고: 순수함수란? 간단하게 말하면 같은 값을 넣었을 때 값이 일정하게 나오는게 순수함수라고 할수 있다.
간단한 리듀서 함수 예제를 가져와 보았다. 하나하나 어떤 기능을 하는지 알아보자
리듀서는 반드시 state값을 직접 변경해주는 것이 아니라 새로운 객체를 복사해 action값을 넣어주어야 한다.
알수 없는 액션. 즉 예상할수 없는 액션이 들어오면 그대로 state값을 반환한다.
//액션으로 filter를 넘겨준뒤 리듀서에서 처리하는 방법
//state초기값
const initialState = {
visibilityFilter: VisibilityFilters.SHOW_ALL,
todos: []
}
//파라미터로는 state와 미리 정의해 두었던 action 객체를 불러오게 된다.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER: //action {type: SET_VISIBILITY_FILTER, filter:abc}일때
return Object.assign({}, state, { //직접 state값을 변경하지 않고 빈 객체에 state와
visibilityFilter: action.filter //action값을 복사해서 새로운 state객체를 리턴해준다
});
default: //알수 없는 액션. 즉 예상할수 없는 액션이 들어오면 그대로 state값을 반환한다.
return state
}
}
Store란?
앱의 전체 상태 트리를 가지고 있는것이 스토어 이다. 스토어 안의 상태를 변경하는 유일한 방법은 위에서 공부한 액션을 보내는 방법 뿐인다.
스토어는 클래스가 아니다. 단지 안에 몇가지 메서드가 들어있는 객체이다. 스토어를 생성하기 위해서는 루트 리듀서(리듀싱 함수)를 createStore에 전달하면 된다.
Store 메서드
- getState()
- dispatch(action)
- subscribe(listener)
- replaceReducer(nextReducer)
getState()
애플리케이션의 현재 상태 트리를 반환한다. 스토어의 리듀서가 마지막으로 반환한 값과 동일한다.
다시말해 현제 state의 값을 불러오는 메서드라고 할수 있다.
dispatch(action)
액션을 보내는 메서드로 상태(state) 변경을 일으키기 위한 유일한 방법이다.
action : 앱의 변경사항을 기술하는 평범한 자바스크립트 객체, 액션은 변화를 스토어로 보내는 유일한 방법으로 어떤 소스,데이터든간에 액션을 통해 보내져야 한다. 액션은 반드시 어떤 형태의 액션이 행해질지 지시하는 type 필드를 가져야 한다.
subscribe(listener)
변경사항에 대한 리스너를 추가한다. 리스너는 액션이 보내져 상태 트리의 일부가 변경될 수 있을 때마다 호출된다,
쉽게 예를 들어 Store에 state의 값이 변경 될 때마다 render()함수를 재 실행한다면 자동으로 UI가 업데이트 될수 있게 만들수 있다.
render함수를 subscribe에 등록하는 구체적인 코드는 store.subscribe(render) 를 작성하면 state에 변화가 생길 때 마다 렌더함수를 호출해 UI를 업데이트 할수 있다
현재 상태 트리를 읽으려면 getState()를 호출하면 확인할수 있다.
생활코딩에서 제공해주는 리덕스 지도가 이해하는데 좀더 도움을 줄수 있을거 같아 가져왔습니다.
그림을 통해 dataflow를 어느정도 직관적으로 이해하실수 있을겁니다
