<React> Redux State를 올바르게 사용하는 방법

·2023년 8월 5일
0

React

목록 보기
17/23

들어가기 앞서

매우 중요합니다.

Redux의 state를 다루는 것에 있어 간단한 규칙이다.

Redux로 작업할 때 절대 기존의 State를 변형해서는 안 된다.
(store에 있는 initalState)

매우 중요한 한 줄이다.

대신에, 새로운 state 객체를 반환하여 항상 재정의한다.

본문

Redux는 기존의 state를 대체하는 것에 사용하는 완전히 새로운 객체인 새 Snapshot을 항상 반환해야 합니다.
(store에 있는 initalState를 덮어씌우는 Snapshot)

reducer에서 반환하는 객체는 중요하지 않다. 하지만 중요한 것은 snapshot인데, 이 snapshot은 기존 state와 병합되지 않고 기존 state를 덮어씌운다는 것이다.

(기본적으로 snapshot에는 초기 state값들이 다 포함되있어야 합니다.)

기존에 Redux에 기본 설정값으로 정해줬던 값들이, 여러 action.type에 들어가있지 않다면, 기존 설정된 객체가 undefined로 뜨면서 에러를 유발할 수 있다. (최신 snapshot으로 덮어씌우지 않으면 기존 state가 없어질 수 있다는 말이다.)

때문에, state를 업데이트 할 때는 업데이트할 state와 다른 초기 state를 함께 넣어주어야 한다.

redux로 작업할 경우, 절대로 기존의 state를 변형해서는 안되는데 이것은 매우 중요합니다.

기존의 redux state를 건들지 않고, 새로운 state 객체를 반환하여 재정의하는 방법을 채택합니다.

또한 객체와 배열은 자바스크립트에서 참조값이기 때문에 뜻하지 않게 기존의 state를 재정의하거나 변경하기 쉽습니다.
이러한 이유에서 store에 있는 원본 state를 절대 변경해서는 안된다.

요약 및 예시

Redux state는 항상 새로운 객체를 1️⃣복사하고 2️⃣생성해야 합니다.

⬇ store.js

0개의 댓글