아래 기술하는 Redux state의 3가지 원리는 단순히 redux 상태관리에 적용되는 걸 넘어, React hooks 등과 같은 상태관리에도 적용될 수 있는 항목임을 기억한다.
1. single source of truth
redux에서 저장되는 data는 유일하게 store에서만 저장되고 활용할 수 있다.
2. state is for read-only
"상태", state 그 자체는 오직 읽기만 가능하며 수정은 불가능하다.
- store.getState를 통해 오직 상태 data를 읽을 수만 있다.
- store를 내부의 data를 수정하는 과정은 오직 reducer 함수 내부 및 외부에서 dispatch하는 action을 통해서만 가능하다.
3. state를 직접적으로 mutation하지 않는다
reducer 내부에서 state 자체를 직접적으로 mutation 하는 것이 아니라,
state로 관리 중인 data를 변화하여 이를 반영한 "변화 state 객체"를 반환하는 것이다.
- state.push(action.text)와 같이 state를 직접 수정하지 않는다.
- return [...state, {text : action.text}]와 같은 구조로 기존 state와 변화 state를 같이 전달, 즉 이러한 변화가 반영된 새 객체를 return하는 것으로 수정한다.
※ 쉽게 말하면 reducer는 새로운 state object를 create하고, 이를 return 해준다.
※ 그 후 별도의 함수를 통해 getState하고, 변화한 객체를 대상을 화면에 구현하거나 map loop를 통해 변화한 state를 반영하는 등의 구조를 구성해준다.
※ 메모리/포인터 관점에서 살펴보았을 때, 기존의 state를 직접 mutation하면 기존 메모리는 그대로 유지되는 동일 state(배열) 상 수정이 된다. 그러나 새로운 객체를 create/return 하면 말 그대로 메모리도 완전히 다른 새로운 객체를 생성/전달받게 된다.
4. 참조링크
redux three principles(redux 공식문서)
https://redux.js.org/understanding/thinking-in-redux/three-principles
