[React] Redux toolkit 02

✅ State 변경하기

• createSlice에서 state 수정 함수 만들고,

• 원할 때 그 함수 실행해달라고 store.js에 요청

• 순서대로 봐보자면

  1. state 수정 함수 만들어주기

     let state이름 = createSlice({    
         name : 'state이름',
         initialState : 'value',
         // state 수정함수
         reducers : {
             수정함수이름(🔸파라미터 넣으면 기존 state 담김🔸){
             	// 🔸새로운 값 return해주면 state 변경됨!!🔸
                 return 'new value';
             }
         }
     })

  2. 만든 함수 export 해주기

     state이름.actions
     // state 변경 함수들이 담김
     
     // 관습적으로 Destructuring 사용
     export let {setState, changeState, ...} = state이름.actions;

  3. 컴포넌트에서 useDispatch와 함께 import 해서 사용

     • useDispatch는 store.js에 요청을 보내주는 함수

     • useDispatch는 요청만, 실행은 store.js가!!

     • import 하기

       // 변경함수 import
       import setState from '/store경로'
       
       // useDispatch import
       import {useDispatch} from "react-redux";

     • 사용하기

       // 컴포넌트 안에서 useDispatch
       let dispatch = useDispatch();
       
       // dispatch로 import한 변경함수 사용
       <button onClick={()=>{
           dispatch(setState());
       }}> change </button>

• 방법이 다소 복잡해 보이는데,

• 정해진 형식이라 어쩔수 없음

• 그리고 사실상 사이즈가 커지다보면 버그 방지등 장점이 많음
  => 다양한 컴포넌트가 state를 직접 수정하려다보면 버그 발생시 원인 찾기 어려움
  => 수정함수를 통하면 버그 추적이 용이 (state 이상해지면 store.js의 수정함수만 문제!!)

✅ Array, Object 자료형 State 변경하기

• 하드코딩으로 하자면 reducers 내부 함수에서 리턴문에 넣어주면 됨

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 27},
  reducers : {
    setName(){
        return {name : 'Yu', age : 27}
    }
  }
})

• 근데 사실 Array / Object의 경우 직접 수정해도 state가 변경됨

reducers : {
  setName(state){
    state.name = 'Yu'	
  }
}

• 정확히는 함께 설치된 Immer.js의 도움
• 이처럼 배열과 객체 자료형의 수정이 더 편리하기 때문에 단일값도 배열이나 객체에 넣는 경우도 있음

🔹 State 변경함수에 파라미터 뚫기

• state 변경함수에 파라미터 하나 넣으면 자동으로 state 담기지만,
• 하나 더 넣어주면 파라미터 자리를 만들어 줄 수 있음
• 그리고 변경함수 내부에서는 해당 파라미터 변수에 🌟 .payload 🌟 를 붙여줘야 정상적으로 사용 가능!!!
  => dispatch로 전송하는 메시지에 화물을 실어 보내는 형식
• 관습적으로 파라미터 이름은 'action'으로 작명
  => 화물 뿐만 아니라 여러가지 action( == 변경함수)에 대한 정보도 들어있기 때문에

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 27},
  reducers : {
    agePlus(state, action){
        state.age += action.payload;
    }
  }`

✅ 파일 분할하기

• 코드가 길어지면 import, export 활용하쟈!!
• src 내부에 폴더 만들어서 사용