1. React-Redux 및 Redux Toolkit 설치

npm

React-Redux

• npm install react-redux

Redux Toolkit

• npm install @reduxjs/toolkit

yarn

React-Redux

• yarn add react-redux

Redux Toolkit

• yarn add @reduxjs/toolkit

2. Redux Store 생성

• src 폴더 내에 redux라는 폴더를 생성하고, store라는 파일을 만듬.
  이 파일에서 Redux Toolkit의 configureStore 함수를 사용하여 Redux 스토어를 생성

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    // 여기에 리듀서를 추가.
  },
});

export default store;

3. Provider 컴포넌트 설정

• 가장 최상위 폴더인 main.jsx에서
  React-Redux의 Provider 컴포넌트를 사용하여 React 애플리케이션에 Redux 스토어를 제공

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

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

4. Slice 생성

• 리덕스 모듈을 구성하기 위해 redux폴더 내에 slice.js파일을 생성
  Redux Toolkit의 createSlice 함수를 사용하여 리듀서와 액션 생성자 함수를 생성

import { createSlice } from '@reduxjs/toolkit';

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

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

5. 스토어에 Slice 등록

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';//counterReducer ===counterSlice.reducer

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

export default store;

useSelector, useDispatch

useSelector

• Redux 스토어의 상태를 가져오는 데 사용
• 함수형 컴포넌트 내에서 useSelector를 호출하여 필요한 상태를 선택

import { useSelector } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  // state.counter.value에 저장된 값을 가져옴.
  return <div>Count: {count}</div>;
}

useDispatch

• Redux 액션을 디스패치하는 데 사용
• 함수형 컴포넌트 내에서 useDispatch를 호출하여 액션 디스패치 함수를 가져옴

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment(5)); // action.payload로 5전달. 5만큼 증가
  };

  const handleDecrement = () => {
    dispatch(decrement(3)); // action.payload로 3전달. 3만큼 감소
  };

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}