본문으로 바로가기

Reducer

category 개발/React 2019. 6. 25. 13:05

store는 커다란 JSON의 결정체로 상태는 기본적으로 store에서 집중관리한다.

{
    session: {
    ...
	},
    timeline: {
    ...
    },
    notification: {
    ...
    }
}

 

이 store 와 store에 존재하는 state는 신성한 존재이다.
감히 react component 따위는 범접할 수 없는..
그렇기에 component가 store(state)와 닿기위해서는 action이라는 신성한 의식을 거쳐야한다.

그럼 action을 하면 store(state)와 바로 닿을 수 있느냐?! 그건 또 아니다.
신성한 store 영역을 지키는 문지기가 있는데 그것이 바로 reducer 인것.

그렇다면 component를 store(state)에 닿게하는 신성한 의식인 action은 어떻게 생겼냐면

{
    type: 'change-name',
    payload: 'data'
}

요래 생김.

reducer는 action의 type을 보고 reducer내의 switch문의 해당영역으로 감.
old state와 action의 payload를 가지고 new state를 return한다.

데이터의 불변성을 유지하기 위해 새로운 데이터를 리턴.

 

old data + action 을 가지고 reducer는 적절한 new state를 경신한다.
state가 변경되었으므로 해당state가 사용되는 컴포넌트는 리렌더링

'개발 > React' 카테고리의 다른 글

this.setState  (0) 2019.07.03
Redux  (0) 2019.06.26
JSX  (0) 2019.06.22
Actions  (0) 2019.06.21
Views와 Controller-Views  (0) 2019.06.21