React - Redux4 : state가 object/array 일 경우 변경하는

• store에 저장된 state가 array, object 자료인 경우 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}
    }
  }
}) 

• 전 시간에 배웠던대로 changeName() 을 사용하면 변경이 된다.

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

• 하지만 state를 직접 수정하라고해도 변경이 잘 된다.
• state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는 Redux 를 설치할 때 딸려오는 Immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분이다.

• 즉, array/object 자료의 경우 state변경은 state를 직접 수정하는 것이 좋다.
  (참고) 그래서 state를 만들 때 숫자나 문자 하나만 필요해도 redux에서 일부러 object 아니면 array에 담는 경우도 있다.

🤍 간단한 문제 풀기

• 버튼을 하나 만들고 버튼을 누르면 state 항목이 +1 이 되야한다.

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

• increase 라는 함수를 만들고 export 한 후 필요한 곳에서 import 하여 dispatch(increase()) 하면 된다.

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

• 가끔은 +10 을하고 +100 하고 싶으면 함수를 여러개 만들어도 되지만
  ⭐파라미터문법을 사용하면 비슷한 함수 여러개 만들 필요가 없다고 했었다.

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

• 이제 increase(10) -> +10, increase(100) -> +100 실행이 된다.
• 파라미터자리에 넣은 자료들은 action.payload하면 나온다.

🖤 파일분할하기

• store폴더 안에 userSlice.js 파일을 만들어 state변경함수를 넣었다.

(userSlice.js)

import { createSlice } from "@reduxjs/toolkit";

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

export let { changeName, increase } = user.actions;
export default user;

---

📒 오늘의 숙제

1. + 버튼을 누르면 해당 상품의 수량부분이 +1 되는 기능 만들기
2. 상세페이지 주문하기 버튼을 누르면 새로운 상품이 state에 추가되는 기능 만들기