[🔥송이와 🥕홍] Redux Toolkit + Nextjs

리덕스 툴킷은 리덕스의 복잡한 환경설정을 간단하게 해줍니다. 자세한 건 공식문서를 참고하면 좋습니다.

몇 가지 개념만 알아두면 편하게 사용할 수 있습니다.

---

1. slice

action, ruducers 등등등 관련된 걸 편하게 한번에 정의하는 것을 말합니다. 이름은 그냥 slice라고 공식문서에서 부릅니다. 이유는 모름

• createSlice

예시(구성)

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

// 타입선언 


// 초기 상태 정의
const initialState = { value: 0 }; 


// createSlice 자리
// action & reducers 동시에 편하게 설정할 수 있게합니다.
// name, 초기값, reducers만 넣어주면 됩니다.
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

// 액션 생성 함수랑 리듀서를 바깥으로 빼줘야 사용할 수 있습니다.
export const { increment, decrement } = counterSlice.actions; // 액션 생성함수
export default counterSlice.reducer; // 리듀서

---

2. store

이렇게 정의한 액션들과 미들웨어 등등을 정의하는 곳입니다. 만약 context api와 redux 중 고민하고 있다면, 단지 reducer와 action, dispatch만 사용하려면 전자를, 미들웨어를 사용하려면 리덕스를 선택하는 게 맞다는 이야기를 어디서 보았습니다... 💁‍♀️

• ConfigureStore: 이거의 레거시 버전이 있는데 아마 인터넷자료에서는 그걸 쓰는 예시가 많습니다. vsCode에서 자동으로 ConfigureStore를 쓰라고 권장할 것입니다.(eslint에서 봐주질 않습니다.)

보통 아래와 같이 생겼습니다.

const store = configureStore({
  reducer: 사용하는 리듀서를 가져옵니다.,
  middleware: 미들웨어 정의,
  devTools: process.env.NODE_ENV !== 'production',
})

미들웨어를 사용까지 포함된 예시

import { configureStore } from '@reduxjs/toolkit'
import additionalMiddleware from 'additional-middleware'
import logger from 'redux-logger'
// @ts-ignore
import untypedMiddleware from 'untyped-middleware'
import rootReducer from './rootReducer'

export type RootState = ReturnType<typeof rootReducer>
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .prepend(
        // correctly typed middlewares can just be used
        additionalMiddleware,
        // you can also type middlewares manually
        untypedMiddleware as Middleware<
          (action: Action<'specialAction'>) => number,
          RootState
        >
      )
      // prepend and concat calls can be chained
      .concat(logger),
  devTools: process.env.NODE_ENV !== 'production',
})

export type AppDispatch = typeof store.dispatch

export default store

대표적인 미들웨어

logger
action과 Payload를 브라우저 콘솔에 자동으로 찍어줍니다. 개발모드에서만 실행되도록 설정을 해둬야하는데 그거 바로 devTools: process.env.NODE_ENV !== 'production' 부분 입니다.

이 외에도 많은데 좋은 걸 찾아서 쓰면 됩니다!

---

5. 컴포넌트에서 사용

import { useDispatch } from 'react-redux';
import { 스토어에서 내보낸 디스패치 타입 } from '../../redux/store';

export default function 어쩌고(){
	const dispatch = useDispatch<스토어에서 내보낸 디스패치 타입>
    
    dispatch(액션?)


}

---

4. NextJs에서의 사용

넥스트에서는 ssr에서도 스토어가 잘 작동하도록 전체적인 스토어를 다루는 부분이 필요합니다. 그리고 이 친구들을 다 묶어주는 넥스트를 위한 라이브러리도 있습니다.

설치한 패키지

• "next-redux-wrapper"
  이게 다 묶어주는 거라고 합니다? 자세한 건 검색해보아야 할 것 같에요!

1. 구조 설계

리덕스 환경은 하는 사람 나름(?)이기에 자신이 편한대로 구조를 잘 작성하면 됩니다. 필수적인 부분만 있으면 됩니다.

1. 액션과 리듀서를 정의하는 부분
2. 스토어 부분
3. ssr에서도 가능하게 전부 묶어주는 부분

현재 환경은 아래와 같습니다. (아직 작동되는 건지 테스트하진 못해서 나중에 바뀔 가능성도 있습니다.)

stores
ㄴ modules
 ㄴ slices
 	ㄴ 각 slices.ts
 ㄴindex.ts
ㄴindex.ts

stores/index.ts

전체적인 스토어입니다. 미들웨어로는 logger 넣어뒀습니다.

• createWrapper는 next-redux-wrapper에서 가져온 모듈(?)로 스토어를 합쳐줍니다...?

import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import logger from 'redux-logger';
import counterSlice from './modules/slices/counter';

const makeStore = () => {
  const store = configureStore({
    reducer: {
      //리듀서 이름: slice이름
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
    devTools: process.env.NODE_ENV !== 'production',
  });
  return store;
};

const wrapper = createWrapper(makeStore);
export default wrapper;

stores/modules/index.ts

넥스트에서 스토어에 접근할 수 있도록 설정하는 곳입니다. 자세한 건 수정될 가능성이 높습니다!

import { AnyAction, CombinedState, combineReducers } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';

import test from './slices/counter';

const reducer = (
  state: CombinedState<{ test: { value: number } }>,
  action: AnyAction,
) => {
  switch (action.type) {
    case HYDRATE:
      return action.payload;
    default:
      return combineReducers({
        test,
      })(state, action);
  }
};

export default reducer;

stores/modules/slices/[어쩌고].ts

액션과 리듀서를 정의하면됩니다. 모든 슬라이스를 한 곳에 모아도 되고, 따로따로 파일로 분리하여도 됩니다.

2. 사용

_app.tsx

테마처럼 _app.tsx에 적용해줘야 전역에서 사용할 수 있습니다.
stores/index.ts 에서 만들고 내보낸 wrapper를 사용하면 쉽게 적용할 수 있는 것 같습니다.

export default wrapper.withRedux(MyApp);

export하는 부분에 이렇게 쓰기만 하면됩니다.?

컴포넌트에서 사용

이 부분이 Next를 사용하지 않을 때와 차이가 납니다. csr일 때는 동일하게 사용하면 되는 것 같지만, Ssr로 쓰려면 아래와 같이 사용해야한다고 합니다.

export const getServerSideProps = wrapper.getServerSideProps((store) => async({req, res, ...ets)} => {
	await store.dispatch(//여기에 넣기);
    return { props: {} } ;
});

---

추가로 설치된 라이브러리

redux-thunk

context api랑 비교하여 리덕스가 좋은 점. 비동기처리를 아주아주 쉽게 할 수 있습니다. redux-toolkit이랑도 좋습니다. 대신 extraReducers 정의해줘야합니다.

• createAsyncThunck :얘가 비동기처리 해주는 좋은 애입니다.

이 예시는 로그인까지 많은 단계가 필요할 때 사용했던 예시입니다.( a토큰 받고, 그 a토큰으로 엑세스 토큰 받고...뭐이런 경우!)

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

import {
  postAccessToken,
  postRequestToken,
  postSessionId,
} from '../../apis/auth';
import { RootState } from '../store';

export const postLogin = createAsyncThunk(
  'user/login',
  async (email: string, thunkAPI) => {
    const data = {
      email: '',
      requestToken: '',
      accessToken: '',
      sessionId: '',
    };
    try {
      if (localStorage.getItem('requestToken')) {
        const accessTokenResult = await postAccessToken();
        const sessionIdResult = await postSessionId(
          accessTokenResult.access_token,
        );
        return {
          ...data,
          email,
          requestToken: localStorage.getItem('requestToken'),
          accessToken: accessTokenResult.access_token,
          sessionId: sessionIdResult.session_id,
        };
      }
      const result = await postRequestToken();
      return { result };
    } catch (err) {
      return thunkAPI.rejectWithValue(await err);
    }
  },
);

export interface User {
  loading: boolean;
  email: string;
  requestToken: string;
  accessToken: string;
  sessionId: string;
}

const initialState = {
  loading: false,
  email: '',
  requestToken: '',
  accessToken: '',
  sessionId: '',
};

export const loginSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  ///여기 아래로 extraReducers가 추가됩니다.
  extraReducers: {
    [postLogin.pending.type]: (state) => {
      return { ...state, loading: true };
    },
    [postLogin.fulfilled.type]: (state, action: PayloadAction<User>) => {
      state.loading = false;
      state.email = action.payload.email;
      state.requestToken = action.payload.requestToken;
      state.accessToken = action.payload.accessToken;
      state.sessionId = action.payload.sessionId;
    },
    [postLogin.rejected.type]: (state) => {
      return { ...state };
    },
  },
});

export const userSelector = (state: RootState) => {
  return state.userlogin;
};
export default loginSlice.reducer;

---

참고자료

React Redux Toolkit 사용하기
공식문서
[Next.js] Next.js + redux toolkit 기본 세팅