Redux의 state 업데이트는 불변한 방식으로! Feat) Object.assign()

상태 관리 라이브러리인 Redux를 배웠다. 아직은 익숙하지 않지만 확실한 것은 Redux에서 Reducer의 함수의 경우 Redux의 state 업데이트는 불변하는(immutable) 방식으로 변경해야 한다. 그 중 Object.assign을 소개한다.

mdn Object.assign()에서는 객체 2개를 합치기도 하고 {}에 합치기도 한다. Reducer함수를 작성할 때 immutable하게 하려면 어떻게 써야 할까? 답은 이 사이트에서 확인할 수 있다. <리듀서의 인수들을 절대 변경mutate하지 마세요>
이 사이트에는 다음과 같이 나와있다.

 

실험을 해보자. 사용할 객체는 다음과 같다. newData는 state의 cartItems에서 0번째 index의 quantity만 수정해준 값이다.!

const state =
{
  "items": [
    {
      "id": 1,
      "name": "노른자 분리기",
      "img": "../images/egg.png",
      "price": 9900
    },
    {
      "id": 2,
      "name": "2020년 달력",
      "img": "../images/2020.jpg",
      "price": 12000
    },
    {
      "id": 3,
      "name": "개구리 안대",
      "img": "../images/frog.jpg",
      "price": 2900
    },
    {
      "id": 4,
      "name": "뜯어온 보도블럭",
      "img": "../images/block.jpg",
      "price": 4900
    },
    {
      "id": 5,
      "name": "칼라 립스틱",
      "img": "../images/lip.jpg",
      "price": 2900
    },
    {
      "id": 6,
      "name": "잉어 슈즈",
      "img": "../images/fish.jpg",
      "price": 3900
    },
    {
      "id": 7,
      "name": "웰컴 매트",
      "img": "../images/welcome.jpg",
      "price": 6900
    },
    {
      "id": 8,
      "name": "강시 모자",
      "img": "../images/hat.jpg",
      "price": 9900
    }
  ],
  "cartItems": [
    {
      "itemId": 1,
      "quantity": 1
    },
    {
      "itemId": 5,
      "quantity": 7
    },
    {
      "itemId": 2,
      "quantity": 3
    }
  ],
  "notifications": [

  ]
}

newData =   {"cartItems": [
    {
      "itemId": 1,
      "quantity": 9
    },
    {
      "itemId": 5,
      "quantity": 7
    },
    {
      "itemId": 2,
      "quantity": 3
    }]}

Object.assign({}, state, newData)

a의 quantity 값이 변경되더라도 state값은 변경되지 않은 것을 볼 수 있다.

Object.assign(state, newData)

다음과 같이 사용하였을 경우 Object.assign을 했음에도 불구하고 b의 변화에 따라 state값도 영향을 받음을 볼 수 있다.

Object.assign을 통해 state의 불변성을 지켜보자!