Redux Toolkit

Redux Toolkit(RTK)는 Redux의 공식 툴킷으로, Redux 사용의 복잡성을 줄이고 효율성을 높여줍니다. Redux Toolkit을 사용하면 상태 관리와 관련된 작업을 더 간단하고 직관적으로 작성할 수 있습니다.

npm install @reduxjs/toolkit react-redux

1. 스토어 생성

//store.ts
import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});
//상태를 위한 타입
export type RootState = ReturnType<typeof store.getState>;
//액션을 위한 타입
export type AppDispatch = typeof store.dispatch;

2. slice 생성

createSlice로 상태, 리듀서, 액션을 한 번에 정의합니다.

//CounterSlice.ts
import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counterSlice",
  initialState: {
    count: 0,
  },
  reducers: {
    increament: (state) => {
      state.count += 1;
    },
    decreament: (state) => {
      state.count -= 1;
    },
    reset: (state) => {
      state.count = 0;
    },
    increamentByAmount: (state, action) => {
      state.count += action.payload;
    },
  },
});
export const { increament, decreament, reset, increamentByAmount } = counterSlice.actions;
export default counterSlice.reducer;

3. Provider로 스토어 연결

React 애플리케이션에 Redux 스토어를 연결합니다.

//main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Provider store={store}>
    <App />
  </Provider>
);

4. 상태 사용

useSelector와 useDispatch를 사용하여 컴포넌트에서 상태를 읽거나 업데이트합니다.

import { useSelector } from "react-redux";
import { RootState } from "../store";

export default function CounterDisplay() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <h1>Count: {count}</h1>;
}

import { useDispatch } from "react-redux";
import { increment, decrement } from "../features/counterSlice";

export default function CounterControls() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}