리팩토링2

2. any 타입 정리

1. state 타입

reducer파일 수정
기존

const rootReducer = combineReducers({
  // board: boardReducer,
  boardItemMap: boardItemReducer,
  login: loginReducer,
  boardDelete: boardItemDeleteReducer,
  boardModify: boardItemModifySlice,
  boardPageLikedSlice: boardPageLikedSlice,
  boardPageComment: boardPageComment,
  boardPageCommentDelete: boardPageCommentDelete,
  boardPageCommentModifiy: boardPageCommentModifiy,
  boardPageRepplyComment: boardPageReplyComment,
});
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

수정

const rootReducer = combineReducers({
  // board: boardReducer,
  boardItemMap: boardItemReducer,
  login: loginReducer,
  boardDelete: boardItemDeleteReducer,
  boardModify: boardItemModifySlice,
  boardPageLikedSlice: boardPageLikedSlice,
  boardPageComment: boardPageComment,
  boardPageCommentDelete: boardPageCommentDelete,
  boardPageCommentModifiy: boardPageCommentModifiy,
  boardPageRepplyComment: boardPageReplyComment,
});

const rootReducerLogin = combineReducers({
  login: loginReducer,
});

export type RootState = ReturnType<typeof rootReducer>;
export type RootLoginState = ReturnType<typeof rootReducerLogin>;
export default rootReducer;

로그인을 따로 타입을 하나 더 추가

기존

const state: any = thunkAPI.getState();

수정

const state: RootLoginState = thunkAPI.getState() as RootLoginState;

getState() 메서드의 반환 값을 RootLoginState 타입으로 정확히 타입 추론 할 수 있도록 수정

• Redux Toolkit의 getState() 메서드는 기본적으로 상태의 타입을 알 수 없는 unknown 타입을 반환
• 해결책으로는 명시적으로 반환된 값을 원하는 타입으로 타입 캐스팅

Modify

기존

 await dispatch(
        modifyUserData({
          boardId: boardId,
          boarditem: userData,
        }) as any
      );

any를 지우면 나오는 에러

Argument of type 'AsyncThunkAction<{ boardId: number; boarditem: UserData; }, { boardId: number; boarditem: UserData; }, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'

dispatch 함수는 Redux 스토어에 액션을 전달하는 데 사용 AnyAction
modifyUserData가 Redux Toolkit의 createAsyncThunk로 생성된 비동기 Thunk 함수
둘이 호환이 안되서 나오는 에러인데 다양하게 시도를 해봤으나 호환문제로 any로 작성

수정1

import { AsyncThunkAction } from "@reduxjs/toolkit";

const modifyAction: AsyncThunkAction<
  { boardId: number; boarditem: Boardtype }, // 액션의 payload 타입
  { boardId: number; boarditem: Boardtype }, // Thunk 함수의 인자 타입
  {} // extra argument 타입
> = modifyUserData({
  boardId: boardId,
  boarditem: userData,
});

await dispatch(modifyAction);



////
const modifyUserDataThunk: AsyncThunk<
  { boardId: number; boarditem: UserData },
  { boardId: number; boarditem: UserData },
  {}
> = createAsyncThunk("user/fetchUserModifyData", async (data, thunkAPI) => {
  // 비동기 작업 수행
});

1. modifyUserData가 반환하는 액션의 타입은 AsyncThunkAction 라고 해서 연동
2. 제네릭으로 타입 지정
3. thnk파일도 수정 AnyAction 관련으로

어렵다..any타입 수정하고 싶은데
참고
관련에러1
여기에서는 모듈과 충돌이라고한다

수정2
리덕스 홈페이지

store.ts

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Modify.ts
 const dispatch = useAppDispatch();
 
 
  await dispatch(
        modifyUserData({
          boardId: boardId,
          boarditem: userData,
        })
      );

이렇게 수정을 했는데도 동일한 에러가 난다...

수정3
Argument of type 'AsyncThunkAction<{ boardId: number; boarditem: UserData; }, { boardId: number; boarditem: UserData; }, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'

TypeScript는 dispatch(modifyUserData(...)) 호출 시 AsyncThunkAction 타입이 아닌 AnyAction 타입으로 처리하게 됩니다. 이것이 오류가 발생하는 이유입니다.

store.ts
기존

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    const defaultMiddleware = getDefaultMiddleware();
    return [...defaultMiddleware];
  },
});

getDefaultMiddleware()를 호출하여 기본 미들웨어 목록을 가져온 후, spread 연산자를 사용하여 해당 목록을 복사하여 반환합니다. 이러한 방식으로 반환된 미들웨어 목록은 새로운 배열이므로 기본 미들웨어 목록을 변경하지 않으면서 새로운 배열을 생성합니다.

수정

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    const defaultMiddleware = getDefaultMiddleware();
    return defaultMiddleware;
  },
});

getDefaultMiddleware()를 호출하여 기본 미들웨어 목록을 가져온 후, 그대로 반환합니다. 즉, 기본 미들웨어 목록을 변경하지 않고 그대로 반환하므로 새로운 배열을 생성하지 않습니다.

getDefaultMiddleware 함수를 사용하여 기본 미들웨어를 가져온 후, 해당 미들웨어를 배열로 반환하여 사용하는게 맞다
수정된 코드는 현재 리덕스툴킷 버전의 향상으로 인한 상황 같다

아 너무 답답하다.. 리덕스툴킷에 대해 다시 봐야겠다

소플강사님의 Q&A
마이그레이션