Redux 4 : state가 object/array일 경우 변경하는 법

이전 포스팅 🤑
1. Redux 1 : Redux Toolkit 설치
2. Redux 2 : store에 state 보관하고 사용하기
3. Redux 3 : store에 state 변경하는 법

redux state가 array/object인 경우 변경하려면

대충 {name : 'kim', age : 20} 이렇게 생긴 자료를 state로 만들고,

'kim'을 'park'으로 변경하고 싶으면 state 변경함수 어떻게 만들어야할까?

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20}
    }
  }
}) 

기존에는 이런식으로 쓰지만

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
}) 

array/object일 경우에는 state를 직접 수정하라고 해도 변경이 잘 됨.

state를 직접 수정하는 문법을 써도 변경이 잘 되는 이유는 Immer.js라이브러리가 state 사본을 하나 더 생성해준 덕분인데
Redux를 설치하면 딸려와서 그럼.

📎 그래서 state를 만들 때 문자나 숫자 하나만 필요해도 redux에선 일부러 array/object에 담는 경우가 多

🤔 버튼 클릭 시 age가 +1되려면?

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state){
      state.age += 1
    }
  }
})

1. 이렇게 increase라는 함수를 생성하고
2. export하고
3. 필요한 곳에서 import해서 dispatch(increase())하면 +1 됨.

state 변경함수가 여러개 필요하면..

방금 +1하는 기능을 만들었는데

+1
+10
+100
하는 3자기 기능을 만들고 싶으면 어떻게 하면 될까?

함수를 여러개 미리 만들어놓아도 되는데
파라미터 문법을 이용하면 비슷한 함수를 여러개 만들지 않아도 됨.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, action){
      state.age += action.payload
    }
  }
}) 

state변경함수 둘째 파라미터를 작명하면

increase(10)
increase(100)
이런식으로 파라미터를 입력해서 함수사용이 가능함
파라미터에 넣은 자료들은 action.payload하면 나옴

그래서 위처럼 작성하고
increase(10) 실행하면 +10이 되고,
increase(100) 실행하면 +100이 됨

📎참고

• 둘째 파라미터는 action으로 많이 작명 함
• action.type하면 state변경함수 이름이 나오고
• action.payload하면 파라미터가 나옴