[에러일지] createSlice.ts:335 The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead

redux-thunk 강의를 듣던중 위와같은 워닝 에러가 떴다

 

에러 분석

번역

createSlice.extraReducers'의 개체 표기법은 사용되지 않으며 RTK 2.0에서 제거됩니다. 대신 '빌더 콜백' 표기법을 사용하십시오

 

redux-toolkit의 createSlice에서 extraReducers를 사용할 때 객체(Object)를 사용하는것은 redux-toolkit2.0에서 지원하지 않으니 대신 빌더 콜백함수 를 사용하라는 워닝이다

지금 redux-toolkit의 버전은 1.9.7버전이고 이 버전이 2.0.0이 되면 Object형식으로 사용되는 extraReducers는 사라지고 대신 빌더 콜백함수 를 사용하는 extraReducers가 지원된다는 내용이다.

 

기존 extraReducers

extraReducers : {
    // 로딩 중
    [__getTodos.pending] : (state, action)=>{
      state.isLoading = true
      state.isError = false
    },
    // 로딩 완료 (성공)
    [__getTodos.fulfilled]: (state, action)=>{
      console.log(action)
      state.isLoading = false
      state.isError = false
      state.todos = action.payload
    },
    // 로딩 완료 (실패)
    [__getTodos.rejected]: (state, action)=>{
      console.log(action)
      state.isLoading = false
      state.isError = true
      state.error = action.payload
    }
}

 

 

빌더 콜백함수를 이용한 extraReducers

extraReducers : (builder) => {
    builder
    .addCase(__getTodos.pending, (state, action) => {
      state.isLoading = true
      state.isError = false
    })
    .addCase(__getTodos.fulfilled, (state, action) => {
      console.log(action)
      state.isLoading = false
      state.isError = false
      state.todos = action.payload
    })
    .addCase(__getTodos.rejected, (state, action) => {
      console.log(action)
      state.isLoading = false
      state.isError = true
      state.error = action.payload
    })
}

 

기존에는 createAsyncThunk로 만든 thunk함수를 로딩중일때, 성공시, 실패시 등을 객체형태로 주입하고 각각의 객체에 함수를 value-piar로 주어서 비동기 처리를 하였다면 이후빌더 콜백함수 방식은 객체가 아닌 함수((builder)=>{})를 extraReducers의 value-piar로 입력한 후 매개변수 builder에 .addCase를 붙혀서 addCase의 첫번째 인자에 따라 로딩중 , 성공시, 실패시 등의 동작을 처리한다. .addCase의 두번째 인자로는 함수가 들어가는데 첫번째 인자로 들어온 값에따라 로딩중일때, 성공할때, 실패할때 동작하는 함수이다