state가 array/object일 때 변경하는 방법

1. state가 array/object일 때 변경하는 방법

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

직접 state를 변경해도 된다.
Redux를 설치하면 포함되어 있는 Immer.js 라이브러리가 state 사본을 하나 더 생성해주기 때문이다.

수정이 편리하기 때문에 문자나 숫자 하나만 필요해도 redux에서 일부러 objext나 array에 담는 경우도 있다.

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

increase함수가 필요한 곳에 import하고 dispatch(increase())해주면 +1이 된다.

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

+1 하는 버튼도 +10 하는 버튼도 +100하는 버튼도 만들고 싶다면?
state 변경함수에도 파라미터 문법을 사용해 함수를 여러개 만들지 않아도 된다.

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

state 변경함수의 두번째 파라미터를 넣어주고 increase(10), increase(100) 처럼 파라미터로 전달한 값을 더해주는 함수로 사용 가능하다.
파라미터 자리에 넣은 자료들은 a.payload하면 나온다.
payload는 화물, 소포라는 뜻을 가졌다.
파라미터를 payload라고 하는 이유는 store에 메시지를 보내면서 increase(화물)함수를 실행할 때 같이 실어보내는 화물이라고 생각하면 된다.

a 자리에는 보통 action으로 작명한다.
action.type 하면 state변경함수 이름이 나온다.
action.payload하면 파라미터가 나온다.

3. 코드가 너무 길어지면 파일을 분리하자.

user라는 변수가 너무 길어진다면 가독성이 떨어질 수 있다.
해당 부분만 따로 분리해서 컴포넌트처럼 파일로 만들어 사용할 수 있다.