리덕스는 데이터를 immutable 하게 수정한다.
때문에 데이터를 수정하려면 Object.assign이나 spread operator를 사용해야 한다.
그러나 객체 안의 객체까지 deep copy를 하려면 코드가 지저분해질 수밖에 없다.
const person = {
name: 'socratone',
address: {
country: 'korea',
city: 'seoul'
}
};
const updated = {
...person,
address: {
...person.address, // 윗줄의 address가 같은 객체를 가리키지 않도록
city: 'nonsan' // city를 nonsan으로만 바꿨다.
}
};
deep copy를 하기 위해 객체를 거의 새로 쓰다시피했다.
이런 복잡함을 줄이려 라이브러리를 쓸 수 있다.
유명한 라이브러리로는 immutable, immer, Mori가 있는데
여기서는 immer를 소개한다.
먼저 터미널에서 npm i immer를 입력해 설치한다.
아래처럼 produce 메소드를 사용해서 새로운 객체를 만들 수 있다.
import { produce } from 'immer';
const book = { title: 'history' };
const updated = produce(book, obj => {
obj.page = 100;
});
'Redux' 카테고리의 다른 글
Redux Toolkit State를 리셋하는 방법 (0) | 2021.11.01 |
---|---|
Redux의 코드를 간결하게 해주는 @reduxjs/toolkit (0) | 2020.12.05 |
Redux 기본 사용 방법 (0) | 2020.04.25 |