[React_study] Redux state가 object/array일 경우 변경 방법

* store에 저장된 state가 array, object 자료인 경우

• Immer.js 라이브러리가 state사본을 하나 더 생성해주어서 직접 수정하는 문법도 잘 변경 된다.

    (Redux를 설치하면서 Immer.js라이브러리가 같이 설치되었다.)

• array/object자료의 경우 state변경을 state를 직접 수정해버려도 잘 된다.

    (참고) 그래서 state를 만들 때 문자나 숫자 하나만 필요해도 redux에서는 일부러 object아니면 array에 담는 경우가 있다. 수정이 편리하기 때문에

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

* 다른 예시 코드

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

 

---

* state 변경 함수가 여러개 필요할 때

- 파라미터를 이용한다.

- state변경함수의 두번째 파라미터를 이용한다.

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

 

increase(10) // + 10이 된다.

increase(100) // + 100이 된다.

 

(참고)

- action 이런 식으로 작명 많이 한다.

- action.type 하면 state변경함수 이름이 나온다.

- action.payload 하면 파라미터가 된다.