[Redux] Redux의 흐름

Redux의 3가지 원칙

1. 하나의 애플리케이션 안에는 하나의 스토어만 사용하자.

특정 업데이트가 빈번하게 일어나거나, 애플리케이션 특정 부분을 분리시키게 되면, 여러 개의 스토어를 사용할 수 있다, 하지만, Redux는 하나의 애플리케이션에서 여러 개의 스토어 사용을 권장하지 않는 이유는 개발 도구를 활용하지 못하게 되어 디버깅이 어려워지기 때문이다. 그러니 하나의 스토어만 사용하여 디버깅을 용이하게 하고, 서버와의 직렬화를 통해 클라이언트에서 데이터를 쉽게 받아올 수 있도록 한다.

 

2. state는 읽기 전용이다.

Redux는 state를 변경할 때, 기존 값은 건드리지 않고, action을 일으켜 새로운 state를 생성하여 업데이트해주는 방식이다. 이것은 Redux 고유의 불변성을 지키고, state를 변경하려는 의도를 파악하고 디버깅을 용이하게 한다.

 

3. Reducer는 순수 함수여야 한다.

변화를 일으키는 Reducer는 반드시 순수 함수여야 한다. 순수 함수가 다음 조건을 만족해야 한다.

• Reducer 함수는 이전 state와 action 객체를 parameter로 받는다.
• parameter외의 값에 의존해선 안된다.
• 이전 state는 건드리지 않고, 변화를 준 새로운 state 객체를 만들어서 리턴한다.
• 같은 parameter로 호출된 Reducer 함수는 언제나 같은 결과를 리턴해야 한다.

 

Redux Flow

지금부터 아래의 이미지와 함께 Redux의 전체 흐름에 대해 정리해보자.

초기 상태
- store에서 reducer를 호출하고 리턴 값을 초기로 상태로 저장한다.
- UI가 최초 렌더링 될 때, UI 컴포넌트는 store의 state에 접근하여 렌더링에 활용한다. 그리고 그 state가 업데이트되는 것을 subscribe 한다.

 

Flow(업데이트) 순서

1. Deposit $10 버튼을 클릭한다.
2. dispatch 함수를 실행시켜 action을 일으킨다.
3. store에선 이전 state와 현재의 action으로 reducer함수를 실행하고, 리턴된 값을 새로운 state로 저장한다.
4. store에서 store를 subscribe하고 있던 UI 컴포넌트들 에게 업데이트 여부를 알린다.
5. store의 데이터가 필요한 각각의 컴포넌트들은 state가 업데이트되었는지 확인한다.
6. 데이터가 변경된 요소들은 새로운 데이터로 강제 리렌더링 되므로화면에 표시되는 내용을 업데이트할 수 있다.

 

 

출처 : bit.ly/3JUfLpN