⚛️ Redux Toolkit 기초

• props 없이 state를 공유할 수 있게 도와주는 라이브러리
• JS 파일 하나에 state를 보관하고 모든 컴포넌트가 사용할 수 있음
• redux-toolkit으로 문법이 더 쉬워짐

---

📌 사용법

✅ 설치

npm install @reduxjs/toolkit react-redux

---

✅ 초기설정

1️⃣ state를 보관하는 .js 파일에 아래와 같이 작성

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

2️⃣ index.js 에서 <Provider>로 <App/> 감싸기

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}> // 이부분 작성
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
); 

---

✅ Redux store에 state 보관하기

1️⃣ createSlice()로 state 생성
2️⃣ configureStore()안에 등록

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({ // 1️⃣ createSlice()로 state 생성
  name : 'user', // state 이름
  initialState : 'kim' // state 값
})

export default configureStore({ // 2️⃣ configureStore()안에 등록
  reducer: {
    user : user.reducer // { 작명 : createSlice만든거.reducer }
  }
}) 

---

✅ Redux store에서 state 가져오기

• useSelector((state) => { return state })
• useSelector((state) => state.user ) 👍

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

---

✅ Redux의 state 변경하기

1️⃣ Redux store 파일에서 state 수정함수 만들기

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : { 
    changeName(state){ // 자유롭게 작명 가능
      return 'john ' + state // 'kim' ➡️ 'john kim'
    }
  }
}) 

2️⃣ Redux store 파일에서 export 하기

export let { changeName } = user.actions 

3️⃣ import 해서 사용

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

(생략) 

<button onClick={()=>{
  dispatch(changeName()) // dispatch()로 감싸줘야함
}}>버튼임</button> 

🚨 컴포넌트에서 state 직접 수정하면 버그 발생시 범인찾으려 모든 컴포넌트 뒤져야함 ➡️ store.js에서 수정함수 만들어서 사용

---

✅ Redux state가 array/object인 경우 변경하기

방법 1️⃣

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20} // 리턴 오른쪽에있는걸로 갈아끼움
    }
  }
}) 

방법 2️⃣

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park' // state 직접 수정도 가능 ➡️ immer.js 라이브러리가 state 사본을 하나 더 생성해줘서(Redux 설치시 딸려옴)
    }
  }
}) 

🚨 결론

• array/object 자료의 state변경은 직접 수정가능
• 심지어 더 편하니깐 일부러 array/object로 만들자

---

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

• 파라미터 문법 이용가능

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += a.payload // action. 으로 작명 많이함
    } // action.type ➡️ state 변경함수 이름
  } // action.payload ➡️ 파라미터 가져오기
}) 

---

📚 Reference : React 리액트 기초부터 쇼핑몰 프로젝트까지!(🍎 코딩애플)