Today I Learned

팀원분이랑 같이 밤새면서 프로젝트 하는데 css가 잘 안돼서 ㅋㅋㅋㅋ 닉네임 길이가 길어지면 동석이 형님 얼굴이 점점 찌그러드는게 너무 웃겨서 한참 웃었다🤣

오늘 한일✅

• 우리조는 리덕스 toolkit과 thunk를 사용하기로 해서 리팩토링을 했다..
• thunk는 아예 몰랐고 toolkit은 살짝 알고 있었으나 리팩토링에 어려움을 느껴 팀원분이 도와주셨다..
• 좋아요 기능으로 얼른 넘어가야되기 때문에 팀원분이 리팩토링을 도와주셨다ㅋㅋㅋ나도 우리 사장님처럼 잘하고 싶다...갓유정

해결✅

• 그 전 포스팅에 최종 3개의 리덕스 파일을 하나의 파일로 압축? 코드 길이가 상당히 줄어들었다.
  createAsyncThunk는 비동기작업을 처리하는 action을 만들어준다.

MediaSlice.ts

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { request } from '../../utils/Api';

const initialState = {
  search: [],
  loading: false,
  error: null,
  nextPageToken: null,
};

interface VideoPayload {
  channelId: string;
  orderType?: string;
  results?: number;
}

export const getSearchVideos = createAsyncThunk(
  'getSearchVideos',
  async ({ channelId, orderType, results }: VideoPayload, thunkAPI) => {
    try {
      const { data } = await request('/search', {
        params: {
          part: 'snippet',
          channelId: channelId,
          order: orderType ?? 'date',
          maxResults: results ?? 50,
          pageToken: '',
          type: 'video',
        },
      });

      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

const mediaSlice = createSlice({
  name: 'media',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getSearchVideos.fulfilled, (state, { payload }) => {
      state.search = payload.items;
      state.nextPageToken = payload.nextPageToken;
    });
  },
});

export default mediaSlice.reducer;

configStore.ts

import { configureStore } from '@reduxjs/toolkit';
import media from '../modules/MediaSlice';
import artists from '../modules/ArtistsSlice';

const store = configureStore({
  reducer: {
    media,
    artists,
  },
});

export default store;

// State의 타입 얻기
export type RootState = ReturnType<typeof store.getState>;

// Dispatch 타입 얻기
export type AppDispatch = typeof store.dispatch;

알게 된점✅

• 프로젝트가 끝나면 리액트 -> 리덕스 -> toolkit -> thunk -> React-Query 순으로 간단하게 뭐라도 만들어보자규!