redux-toolkit 세팅

nextjs + typescript + jest + storybook + eslint + prettier + styled-components + yarn berry + RTK 거의 다 했다...!

• https://velog.io/@baemki/Next.js-redux-toolkit-redux-wrapper-redux-persist-%EC%84%B8%ED%8C%85 이전에 작성한 글 참고 + 이번 프로젝트 세팅하면서 생기는 에러 작성 예정

• redux-wrapper는 사용하지 않을듯

• yarn add @reduxjs/toolkit

• yarn add redux-presist

• react-app-env.d 추가

<reference types="redux-persist" />

• store 생성

//store.ts
import { combineReducers, PreloadedState } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web

import counterReducer from '../features/counter/counterSlice';

const persistConfig = {
  key: 'root',
  storage,
};
const rootReducer = combineReducers({
  counter: counterReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

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

//_app.tsx
import React from 'react';
import '../styles/globals.css';
import { Provider } from 'react-redux';
import type { AppProps } from 'next/app';
import { store, persistor } from '../features/store';
import { PersistGate } from 'redux-persist/integration/react';

const MyApp = ({ Component, pageProps }: AppProps) => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Component {...pageProps} />
    </PersistGate>
  </Provider>
);

export default MyApp;

• counter 관련 코드는 생략하겠음 공식 문서에 있는 튜토리얼 참고!