Next.js | Redux-toolkit in Next.js( typescript ) | 기본 세팅

이번 포스트에는 리덕스 미들웨어중 하나인 리덕스 툴킷에 대해 알아보겠다.

전에는 Redux-Thunk 를 사용하였지만 비교를 위해서도 그렇고 사용하기 편하고 확장성이 유용하다 하여 

툴킷을 사용해보게 됐다.

 

1. 먼저 필요한 모듈들을 설치한다.

$npm i react-redux next-redux-wrapper @reduxjs/toolkit
$npm i -D @types/react-redux typescript

 

2. src 폴더 밑에 store 폴더를 만들고 다음과 같이 정의 할 state를 추가해준다.

( createSlice 함수로 만들기에 파일 이름 뒤에 Slice를 붙였다.)

 

src/store/features/user/userSlice

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

// 인터페이스
export interface UserInterface {
    number : Number;
}


// state 초기값
const initialState: UserInterface = {
    number = 0;
}

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        increment: (state: UserInterface) => {
            state.number += 1;
        },
    },
})

// 액션의 이름을 담아준다 ( CreateSlice 으로 선언한 액션은 생략 가능 !)
export const { increment } = userSlice.actions;

export default userSlice.reducer;

 

3.  store 폴더 밑에 index.ts파일을 만들고 store를 정의해준다.

이 때 중요한 점은 nextJS에서 쓸 땐 createWrapper 메소드로 wrapper를 만들어주어야 한다.

src/store/index.ts

import { configureStore } from '@reduxjs/toolkit'
import { createWrapper } from 'next-redux-wrapper';
import userSlice from './features/user/userSlice'

export const store: any = () => configureStore({
    reducer: {
        user: userSlice
    },
})

// nextjs 에서 쓸 때는 wrapper를 만들어주어야 한다!
export const wrapper = createWrapper(store, {
    debug: process.env.NODE_ENV !== "production",
});

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

 

 

4. _app.tsx 폴더에서 Component 에 wrapper를 씌어준다.

pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { NextPage } from "next";
import React from "react";
import { wrapper } from '../src/store' // redux-store



const MyApp: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => {
  return (
    <React.StrictMode>
        <Component {...pageProps} />
    </React.StrictMode>
  );
};
export default wrapper.withRedux(MyApp);

 

5. 이제 원하는 곳에 useDispatch와 useSelector를 이용해 상태를 관리할 수 있다!

 ...
 
 import { useDispatch, useSelector } from "react-redux";

 ...
 
const userState = useSelector((state: RootState) => state.user)
const userDispatch = useDispatch();

 ...

useEffect(()=>{
	userDispatch(increment());
},[])