Redux toolkit 사용법

Redux-toolkit 사용 이유 ( Redux 라이브러리 더 쉽게 )

• Redux(리덕스)란 JavaScript 상태관리 라이브러리이다.
• Redux의 본질은 Node.js 모듈이다.

✅ 상태란 무엇인가?

• React 에서 state(변수)는 component안에서 관리되는 것.
• 부모 컴포넌트에서 -> 자식 컴포넌트로 props 를통해 state값을 넘겨 자식 컴포넌트는 props로 넘겨온 값을 넘겨받아 사용.
• 부모기준 형제 컴포넌트 사이에서는 데이터를 주고 받을 수 없는 구조. ( 단방향 기준으로 데이터 전달 === 부모에서 -> 자식 )
• 간단한 구조에서 데이터를 주고 받기에는 무리가 없지만 부모에서 가장 막내자식 컴포넌트가 100번 넘게 계속 바통 터치하듯 넘겨받는다고 생각해보자....(어질어질...🤣)

😒 그럼 state를 부모 컴포넌트에서 관리하지 말고 중앙 관리 통제구역을 만들어서 독립적으로 사용할 순 없나??

전역 스토어 설정 !

👌 가능하다

• 먼저 Root 가 최상위 부모 컴포넌트라고 가정해보자 Root 컴포넌트에서 G 컴포넌트 까지 데이터를 전달하려면
  • ROOT -> A -> E -> G 구조로 단방향으로 전달되는데 이 과정도 전달할 값이 많아지면 props driling이라는 문제가 발생한다.
• 위 그림을 보면 리덕스 스토어라는 중앙관리저장소를 하나 전역으로 만든다고 생각해보자!
  • 그럼 부모로 데이터를 전달받지 않고 직접적으로 데이터를 사용할 수 있어 개발 생산성, 유지보수 대폭 상승!!?

Redux 폴더구조 (완전 초간단)

폴더구조도 간단하게 정의

1. store 정의

src-> store -> store.ts


import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../redux/slice/counterSlice"

export const store = configureStore({
    reducer : {
        counter: counterReducer,
    }
})

// 스토어 state 타입 정의
export type RootState = ReturnType<typeof store.getState>

// dispatch 타입
export type AppDispatch = typeof store.dispatch

2. counterSlice 정의

import { createSlice } from "@reduxjs/toolkit"

interface CounterType {
    value : number
}


const initialCounterState:CounterType = {value: 0}

const counterSlice = createSlice({
    name: 'counter',
    initialState: initialCounterState,
    reducers: {
        increment: (state) => {state.value += 1;},
        decrement: (state) => {state.value -= 1;},
        reset: (state) => {state.value = 0;}
    },
})


export const {increment, decrement, reset} = counterSlice.actions;
export default counterSlice.reducer;

• React-toolkit에서 새롭게 추가된 createSlice 함수는 객체로 3개의 필드를 필수로 설정해줘야 한다!
  • createSlice는 Redux Toolkit에서 action 생성자 + reducer 로직을 한 번에 만들어주는 함수입니다.
  • name: 'counter'
    • slice의 이름, action type에 prefix로 붙습니다. (counter/increment, counter/decrement, counter/reset)
  • initialState
    • 처음 상태 값 ({value:0}).
  • reducers
    • 상태를 어떻게 바꿀지 정의한 함수들입니다.
    • increment: state.value를 1 증가
    • decrement: state.value를 1 감소
    • reset: state.value를 0으로 초기화

Redux 설정이 끝난 후 Provider로 store를 만든 것을 전역으로 감싸줘야 한다.

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { Provider } from 'react-redux'
import { store } from './store/store.ts'

createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>

)

전역으로 store를 만들고 state의 상태값을 가져온 후 변경하기 위해 useSelector, useDispatch를 사용한다.

import { useDispatch, useSelector } from 'react-redux'
import { decrement, increment, reset } from './redux/slice/counterSlice';
import type { AppDispatch, RootState } from './store/store';


function App() {
  const count = useSelector((state:RootState)=> state.counter.value)
  const dispatch = useDispatch<AppDispatch>();

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </>
  )
}

export default App