Переписан extrareducers на callback builder

Author: pmochalov

src/slices/categoriesSlice.js

@@ -26,17 +26,18 @@ export const categoriesSlice = createSlice({
             return state.data.filter(todo => todo.id !== id);
         }
     },
-    extraReducers: {
-        [fetchCategories.pending]: (state) => {
-            state.status = 'loading';
-        },
-        [fetchCategories.fulfilled]: (state, action) => {
-            state.status = 'successful';
-            state.data = action.payload;
-        },
-        [fetchCategories.rejected]: (state) => {
-            state.status = 'failed';
-        }                   
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchCategories.pending, (state) => {
+                state.status = 'loading';
+            })
+            .addCase(fetchCategories.fulfilled, (state, action) => {
+                state.status = 'successful';
+                state.data = action.payload;
+            })
+            .addCase(fetchCategories.rejected, (state) => {
+                state.status = 'failed';
+            })
     }
 });
 

src/slices/todosSlice.js

@@ -1,4 +1,4 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice, createAction } from "@reduxjs/toolkit";
 
 export const fetchTodos = createAsyncThunk(
     'todos/fetchTodos',
@@ -14,6 +14,9 @@ const initialState = {
     data: []
 }
 
+// const incrementBy = createAction('incrementBy')
+// const decrement = createAction('decrement')
+
 export const todosSlice = createSlice({
     name: 'todos',
     initialState,
@@ -34,17 +37,18 @@ export const todosSlice = createSlice({
             state.data.splice(index, 1);
         }
     },
-    extraReducers: {
-        [fetchTodos.pending]: (state) => {
-            state.status = 'loading';
-        },
-        [fetchTodos.fulfilled]: (state, action) => {
-            state.status = 'successful';
-            state.data = action.payload;
-        },
-        [fetchTodos.rejected]: (state) => {
-            state.status = 'failed';
-        }
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchTodos.pending, (state) => {
+                state.status = 'loading';
+            })
+            .addCase(fetchTodos.fulfilled, (state, action) => {
+                state.status = 'successful';
+                state.data = action.payload;
+            })
+            .addCase(fetchTodos.rejected, (state) => {
+                state.status = 'failed';
+            })
     }
 });