프론트엔드

Next.js 15, typescript 환경에서 redux 설정

mindun 2025. 1. 15. 16:33
반응형

>> 배열 전역 상태관리 구성 <<

 

1. 모듈 설치

npm install @reduxjs/toolkit react-redux @types/react-redux

 

2. Redux store 구성

import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import itemsReducer from './slice';

export const store = configureStore({
    reducer: {
        items: itemsReducer,
    },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

 

 # useDispatch -> useAppDispatch로 사용

# useSelector -> useAppSelector로 사용

 

3. slice.ts

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

interface Item {
    id: string;
    name: string;
}

interface ItemState {
    items: Item[];
}

const initialState: ItemState = {
    items: [],
}

const itemsSlice = createSlice({
    name:'items',
    initialState,
    reducers: {
        addItem: (state, action: PayloadAction<Item>) => {
            state.items.push(action.payload);
        },
        removeItem: (state, action: PayloadAction<string>) => {
            state.items = state.items.filter((item) => item.id !== action.payload);
        },
        clearItems: (state) => {
            state.items = [];
        },
    },
});

export const {addItem, removeItem, clearItems } = itemsSlice.actions;
export default itemsSlice.reducer;

 

# addItem => 배열에 객체 추가

# removeItem => 배열에서 객체 삭제

# clearItems => 배열 초기화

 

4. layout.tsx 내부 Provider 설정

    <html lang="en">
      <body>
        <Provider store={store}>
          {children}
        </Provider>
      </body>
    </html>

 

완료~~

반응형