[☂️ Redux] Redux-toolkit 사용법

redux-toolkit 이란..

redux를 이용하여 useState 변수들을 한 곳에 관리할 수 있습니다.
redux-toolkit은 redux를 조금 더 쉽게 관리할 수 있도록 도와줍니다.

toolkit 설치

---

redux-toolkit을 먼저 설치해줍니다.

package.json 파일에서 react, react-dom의 버전이 18.1 이상인지 확인 후, 더 낮다면 react, react-dom 버전을 업그레이드 해야합니다.

(redux-toolkit은 18.1 버전 부터 지원합니다.)

npm install @reduxjs/toolkit react-redux

store.js 파일 설정하기

---

store는 전체 state 파일을 저장해 둘 저장소 같은 역할을 합니다.
store.js 로 파일 이름을 설정 후에 아래와 같이 작성하면 기본 셋팅은 끝입니다.
store.js로 파일명을 지어줘야 redux에서 인식하고 사용할 수 있다고 합니다.

import {configureStore} from '@reduxjs/toolkit'

export default configureStore({
	reducer:{}
})

index.js 파일 설정하기

---

store 파일에 저장된 값을 사용하기 위해서는 provider가 필요합니다.
provider로 감싼 영역은 React 구성 요소에서 저장소(store) 를 사용할 수 있습니다.

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

<Provider store={store}>
	<BrowserRouter>
		<App />
	</BrowserRouter>
</Provider>

createSlice / configureStore로 변수 생성 및 리듀서 지정

---

createSlice 함수를 통해 state값을 생성할 수 있습니다.
name에는 해당 모듈의 이름을 설정할 수 있고,
initialState를 통해 초기값을 설정합니다.

reducers에는 state 값을 변경시킬 함수를 작성합니다.
action을 작성하여 리듀서 함수를 지정해줍니다.

configureStore에 사용할 리듀서를 지정해줍니다.
configureStore에 등록한 리듀서만 사용이 가능합니다.

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

let houseIn = createSlice({
  name:'햄스터',
  initialState:{name:'햄스터', eat:'해바라기씨'},
  reducers :{
  changeEat(state){
    state.eat = '밀웜'
    }
  }
 })

export let { changeEat } = houseIn.actions
 
export default configureStore({
  reducer:{
    house : houseIn.reducer,
  }
})

dispatch로 리듀서 함수 사용하기 / useSelector로 state값 사용하기

---

리듀서 함수를 사용하기 위해서는 Dispatch가 필요합니다.
필요한 API를 불러온 다음, dispatch 함수를 호출해야 합니다.

useSelector를 통해 store에 저장해둔 변수를 한번에 불러옵니다.
원하는 변수를 state.name 과 같이 지정하여 불러올 수도 있습니다.

import { useSelector,useDispatch  } from "react-redux";
 import { changeEat } from './store'


const Test = () => {
  let a = useSelector((state)=>{return state})
  let dispatch = useDispatch();

  return(
    <>
    <div>집에 누가누가 있나요? {a.house.name}</div>
    <hr></hr>
    <div>무엇을 먹고 있나요? {a.house.eat}</div>
    <button onClick={()=>{dispatch(changeEat())}}> 다른 먹이 주기 ! </button>
    </>
    
  )
}

export default Test;

최종 코드

---

Test.js

import { useSelector,useDispatch  } from "react-redux";
 import { changeEat,eatCount } from './store'


const Test = () => {
  let a = useSelector((state)=>{return state})
  let dispatch = useDispatch();

  return(
    <>
      <div>집에 누가누가 있나요? {a.house.name}</div>
      <hr></hr>
      <div>무엇을 먹고 있나요? {a.house.eat}</div>
      <div>{a.house.count}개의 먹이를 먹었습니다. </div>
      <button onClick={()=>{dispatch(changeEat())}}> 다른 먹이 주기 ! </button>
      <button onClick={()=>{dispatch(eatCount(100))}}>먹이 주기</button>
    </>
    
  )
}

export default Test;

store.js

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

let houseIn = createSlice({
  name:'햄스터',
  initialState :{name:'햄스터', eat:'해바라기씨', count:0},
  reducers :{
    changeEat(state){
      state.eat = '밀웜'
    },
    eatCount(state,action){
      state.count += action.payload
    }
  }
})
 
export let { changeEat,eatCount } = houseIn.actions

export default configureStore({
  reducer:{
    house : houseIn.reducer,
  }
})