rc-pagination 기능을 만드는중 다른 탭을 클릭하면 기존 currentpage가 유지되어 데이터 불러오는게 잘못되어 currentpage를 리덕스 툴킷으로 관리해보았습니다.

리덕스 툴킷(Redux Toolkit)이란?

리덕스 툴킷은 리덕스를 더 쉽고 효율적으로 사용하기 위한 도구입니다. 기존의 리덕스 사용 시 발생하는 보일러플레이트 코드를 줄여주며, 애플리케이션 상태 관리를 더 간단하게 만들어줍니다. 리덕스 툴킷은 configureStore, createSlice 등의 API를 제공하여 리덕스의 설정, 액션 정의, 리듀서 구현을 간소화합니다.

npm install redux

npm install @reduxjs/toolkit

Store.js

import { configureStore } from '@reduxjs/toolkit';
import reducer from './modules/reducer';

// 스토어 설정. `data` 키에 대응하는 상태는 `reducer`로 관리됩니다.
export default configureStore({
    reducer: {
        data: reducer, // `data` 상태를 관리하는 리듀서를 지정합니다.
    },
});

configureStore 함수는 미들웨어와 개발자 도구 확장을 자동으로 설정하며, 여러 리듀서를 하나의 스토어로 합칩니다. 이는 애플리케이션 전역의 상태 관리를 위한 중심지 역할을 합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './Store'; // 스토어 임포트

// 리액트 애플리케이션 루트에 스토어 제공
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <Provider store={store}> // 리덕스 스토어를 애플리케이션에 연결
            <App />
        </Provider>
    </React.StrictMode>
);

Provider 컴포넌트는 리덕스 스토어를 리액트 애플리케이션의 모든 컴포넌트에 연결해주는 역할을 합니다. 이를 통해 애플리케이션 어디에서나 스토어에 접근할 수 있게 됩니다.

reducer.js

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

let items = createSlice({
    name: 'currentPage',

    initialState: {
        main: 1,
    },

    reducers: {
        mainChange(state, action) {
            state.main = action.payload; // 현재 페이지 상태를 액션의 payload로 업데이트합니다.
        },
    },
});

export const { mainChange } = items.actions; // 액션 생성자를 내보냅니다.

export default items.reducer; // 리듀서를 내보냅니다.

createSlice 함수는 리듀서 로직과 관련 액션 생성자를 한 번에 정의할 수 있게 해줍니다. 이는 상태 관리 로직을 구조화하고 간소화하는 데 도움을 줍니다.

사용 예제

import { useDispatch, useSelector } from 'react-redux';
import { mainChange } from '../modules/reducer';

const dispatch = useDispatch(); // 디스패치 함수를 사용하기 위해 가져옵니다.
const currentPage = useSelector((state) => state.data.main); // 현재 페이지 상태를 가져옵니다.
    
dispatch(mainChange(1)); // 액션을 디스패치하여 상태를 업데이트합니다.

이 예제에서는 useDispatch와 useSelector 훅을 사용하여 액션을 디스패치하고 상태를 선택합니다. 이는 리덕스 툴킷을 사용하여 상태를 효과적으로 관리하는 방법의 한 예시입니다.