나의 개발일지

[React] 리액트 아웃소싱 프로젝트 / 에러 발생 및 해결 / The object notation for `createSlice.extraReducers`has been removed. 본문

과제 및 팀프로젝트

[React] 리액트 아웃소싱 프로젝트 / 에러 발생 및 해결 / The object notation for `createSlice.extraReducers`has been removed.

heew0n 2023. 12. 8. 21:49

2023.12.07 - [React/과제] - [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기)

 

[React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기)

🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주

heenee.tistory.com

 

 

Thunk로 리뷰 CRUD를 구현하는데 갑자기 이상한 에러가 떴다

 

 

 

`createSlice.extraReducers`에 대한 객체 표기법은 더 이상 사용되지 않습니다.

 

 

 

 

찾아보니 RTK 2.0 이후로는 createSlice에서 extraReducers를 사용할 때  object notation 문법 호환 기능을 삭제했다고 한다. 대신 빌더 콜백 함수를 사용해야 한다고 한

바로 전 개인과제에서 RTK 버전을 확인해보니 1.9.7이었고 이번에 2.0.1로 업그레이드 돼서 아예 에러가 났던 것이다

어찌나 식겁했던지 .. 무서운 빨간 에러창..

 

다운그레이드해서 사용할까 생각했지만 어차피 이젠 계속 업데이트 될 거니까..

공식문서와 블로그를 보며 다시 구현했다

 

 

 

직전 버전

 

최신버전

 

 

 

 

 

 

 

빌더 콜백함수 방식은 기존에 썼던 객체가 아닌 (( builder ) => { } ) 함수를 사용해주었다

그리고 addCase를 사용하여 각각 pending, fulfilled, rejected 의 동작을 처리한다

 

 

 

 

 

https://redux.js.org/tutorials/essentials/part-5-async-logic

 

Redux Essentials, Part 5: Async Logic and Data Fetching | Redux

The official Redux Essentials tutorial: learn how async logic works in Redux apps

redux.js.org