implemented with asyncThunk and loaded addition data

src/app/slices/accessoriesSlice.ts

@@ -1,14 +1,48 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { Accessory } from '../../utils/types/Accessory';
+import { getAccessories } from '../../api/api';
 
-const initialState = null as Accessory[] | null;
+interface AccessoryState {
+  accessories: Accessory[];
+  isAccessoryLoading: boolean;
+  errorOnAccessories: string;
+}
+
+const initialState: AccessoryState = {
+  accessories: [],
+  isAccessoryLoading: false,
+  errorOnAccessories: '',
+};
+
+export const loadAccessories = createAsyncThunk(
+  'accessories/loadAccessories',
+  () => getAccessories(),
+);
 
 export const accessoriesSlice = createSlice({
   name: 'accessories',
   initialState: initialState,
   reducers: {
-    setAccessories: (_, action: PayloadAction<Accessory[]>) => action.payload,
+    setAccessories: (state, action: PayloadAction<Accessory[]>) => {
+      state.accessories = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadAccessories.pending, state => {
+      state.isAccessoryLoading = true;
+    });
+    builder.addCase(
+      loadAccessories.fulfilled,
+      (state, action: PayloadAction<Accessory[]>) => {
+        state.accessories = action.payload;
+        state.isAccessoryLoading = false;
+      },
+    );
+    builder.addCase(loadAccessories.rejected, state => {
+      state.errorOnAccessories = 'error with accessories loading';
+      state.isAccessoryLoading = false;
+    });
   },
 });
 
-export const accessoriesActions = accessoriesSlice.actions;
+export const { setAccessories } = accessoriesSlice.actions;

src/app/slices/phonesSlice.ts

@@ -1,14 +1,47 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { PayloadAction, createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import { Phone } from '../../utils/types/Phone';
+import { getPhones } from '../../api/api';
 
-const initialState = null as Phone[] | null;
+interface PhonesState {
+  phones: Phone[];
+  isPhonesLoading: boolean;
+  errorOnPhones: string;
+};
+
+const initialState: PhonesState = {
+  phones: [],
+  isPhonesLoading: false,
+  errorOnPhones: '',
+};
+
+export const loadPhones = createAsyncThunk('phones/loadPhones', () =>
+  getPhones(),
+);
 
 export const phonesSlice = createSlice({
   name: 'phones',
   initialState: initialState,
   reducers: {
-    setPhones: (_, action: PayloadAction<Phone[]>) => action.payload,
+    setPhones: (state, action: PayloadAction<Phone[]>) => {
+      state.phones = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadPhones.pending, state => {
+      state.isPhonesLoading = true;
+    });
+    builder.addCase(
+      loadPhones.fulfilled,
+      (state, action: PayloadAction<Phone[]>) => {
+        state.phones = action.payload;
+        state.isPhonesLoading = false;
+      },
+    );
+    builder.addCase(loadPhones.rejected, state => {
+      state.errorOnPhones = 'error with phones loading';
+      state.isPhonesLoading = false;
+    });
   },
 });
 
-export const phonesActions = phonesSlice.actions;
+export const { setPhones } = phonesSlice.actions;

src/app/slices/productsSlice.ts

@@ -1,14 +1,47 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { Product } from '../../utils/types/Product';
+import { getProducts } from '../../api/api';
 
-const initialState = null as Product[] | null;
+interface ProductsState {
+  products: Product[];
+  isProductsLoading: boolean;
+  errorOnProducts: string;
+}
+
+const initialState: ProductsState = {
+  products: [],
+  isProductsLoading: false,
+  errorOnProducts: '',
+};
+
+export const loadProducts = createAsyncThunk('products/loadProducts', () =>
+  getProducts(),
+);
 
 export const productsSlice = createSlice({
   name: 'products',
   initialState: initialState,
   reducers: {
-    setProducts: (_, action: PayloadAction<Product[]>) => action.payload,
+    setProducts: (state, action: PayloadAction<Product[]>) => {
+      state.products = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadProducts.pending, state => {
+      state.isProductsLoading = true;
+    });
+    builder.addCase(
+      loadProducts.fulfilled,
+      (state, action: PayloadAction<Product[]>) => {
+        state.products = action.payload;
+        state.isProductsLoading = false;
+      },
+    );
+    builder.addCase(loadProducts.rejected, state => {
+      state.errorOnProducts = 'error with products loading';
+      state.isProductsLoading = false;
+    });
   },
 });
 
-export const productsActions = productsSlice.actions;
+export const { setProducts } = productsSlice.actions;

src/app/slices/tabletsSlice.ts

@@ -1,14 +1,47 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { Tablet } from '../../utils/types/Tablet';
+import { getTablets } from '../../api/api';
 
-const initialState = null as Tablet[] | null;
+interface TabletsState {
+  tablets: Tablet[];
+  isTabletsLoading: boolean;
+  errorOnTablets: string;
+}
+
+const initialState: TabletsState = {
+  tablets: [],
+  isTabletsLoading: false,
+  errorOnTablets: '',
+};
+
+export const loadTablets = createAsyncThunk('tablets/loadTablets', () =>
+  getTablets(),
+);
 
 export const tabletsSlice = createSlice({
   name: 'tablets',
   initialState: initialState,
   reducers: {
-    setTablets: (_, action: PayloadAction<Tablet[]>) => action.payload,
+    setTablets: (state, action: PayloadAction<Tablet[]>) => {
+      state.tablets = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadTablets.pending, state => {
+      state.isTabletsLoading = true;
+    });
+    builder.addCase(
+      loadTablets.fulfilled,
+      (state, action: PayloadAction<Tablet[]>) => {
+        state.tablets = action.payload;
+        state.isTabletsLoading = false;
+      },
+    );
+    builder.addCase(loadTablets.rejected, state => {
+      state.errorOnTablets = 'error with tablets loading';
+      state.isTabletsLoading = false;
+    });
   },
 });
 
-export const tabletsActions = tabletsSlice.actions;
+export const { setTablets } = tabletsSlice.actions;