리덕스의 3가지 규칙
리덕스를 프로젝트에서 사용해야 할 때 지켜야 하는 3가지 규칙
1. 단일 Store
하나의 애플리케이션 안에는 하나의 Store만 들어있다
여러 개의 스토어를 사용하는 것이 완전히 불가능하지는 않지만 상태 관리가 복잡해져서 권장하지 않는다
특정 업데이트가 빈번하게 일어나거나 애플리케이션의 특정 부분을 완전히 분리시킬 때, 여러 개의 스토어를 만들 수 있다
2. 읽기 전용 상태
리덕스 상태 : 읽기 전용
기존의 리액트에서 setState를 사용하여 state를 업데이트할 때
객체나 배열을 업데이트하는 과정에서 불변성을 지켜주기 위해
spread 연산자를 사용하거나 immer와 같은 불변성 관리 라이브러리를 사용한 것처럼
상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다
리덕스에서 불변성을 유지해야 하는 이유
내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 shallow equality 검사를 하기 때문이다
객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지할 수 있다
3. reducer는 순수한 함수이다
변화를 일으키는 리듀서 함수는 순수한 함수이어야 한다
- 리듀서 함수는 이전 상태와 액션 객체를 parameter로 받는다
- parameter 이외의 값에는 의존하면 안된다
- 이전 상태는 절대 건들지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다
- 똑같은 parameter로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다
만약
리듀서 함수 내부에서 랜덤 값을 만들거나
Data 함수를 사용하여 현재 시간을 가져오거나, 네트워크 요청을 한다면
parameter가 동일해도 다른 결과를 만들어 낼 수 있기 때문에 사용하면 안된다
이러한 작업은 리듀서 함수 바깥에서 처리해줘야 한다
액션을 만드는 과정에서 처리해도 되고, 미들웨어 에서 처리해도 된다
주로 네트워크 요청과 같은 비동기 작업은 미들웨터를 통해 관리한다
리덕스 코드를 작성하는 흐름
- 액션 타입과 액션 생성 함수 작성
- 리듀서 작성
- 스토어 제작
react-redux 라이브러리를 사용하여 스토어의 상태가 업데이트될 때마다 컴포넌트를 렌더링한다
