Feat(JS) Added Redux & PersistGate

src/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { store } from './redux/store';
-// import { PersistGate } from 'redux-persist/integration/react';
+import { persistor, store } from './redux/store';
+import { PersistGate } from 'redux-persist/integration/react';
 
 import App from './components/App/App';
 import './index.css';
@@ -14,9 +13,9 @@ root.render(
   <React.StrictMode>
     <Provider store={store}>
       <BrowserRouter basename="/rental-car">
-        {/* <PersistGate loading={null} persistor={persistor}> */}
-        <App />
-        {/* </PersistGate> */}
+        <PersistGate loading={null} persistor={persistor}>
+          <App />
+        </PersistGate>
       </BrowserRouter>
     </Provider>
   </React.StrictMode>

src/redux/filtersSlice.js

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const filterInitialState = {
+  brand: '',
+  price: '',
+  mileage: { from: '', to: '' },
+};
+
+const filtersSlice = createSlice({
+  name: 'filters',
+  initialState: filterInitialState,
+  reducers: {
+    setAdvertsFilter(state, action) {
+      return (state = { ...state, ...action.payload });
+    },
+  },
+});
+
+export const filtersReducer = filtersSlice.reducer;
+export const { setAdvertsFilter } = filtersSlice.actions;

src/redux/operations.js

@@ -5,11 +5,33 @@ export const carsApi = createApi({
   baseQuery: fetchBaseQuery({
     baseUrl: 'https://6522edaef43b1793841510f0.mockapi.io/',
   }),
+  tagTypes: ['Advert'],
   endpoints: builder => ({
     getCarsByPage: builder.query({
       query: (page = 1) => `advert?page=${page}&limit=8`,
     }),
+    getAdverts: builder.query({
+      query: () => '/advert',
+      providesTags: ['Advert'],
+    }),
+    getAdvertById: builder.query({
+      query: id => `/advert/${id}`,
+      providesTags: ['Advert'],
+    }),
+    updateFavoriteAdvertById: builder.mutation({
+      query: fields => ({
+        url: `/advert/${fields.id}`,
+        method: 'PUT',
+        body: fields,
+      }),
+      invalidatesTags: ['Advert'],
+    }),
   }),
 });
 
-export const { useGetCarsByPageQuery } = carsApi;
+export const {
+  useGetCarsByPageQuery,
+  useGetAdvertsQuery,
+  useGetAdvertByIdQuery,
+  useUpdateFavoriteAdvertByIdMutation,
+} = carsApi;

src/redux/selectors.js

@@ -0,0 +1 @@
+export const selectAdvertsFilter = state => state.filters;

src/redux/store.js

@@ -1,14 +1,40 @@
-import { configureStore } from '@reduxjs/toolkit';
-import { setupListeners } from '@reduxjs/toolkit/query';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import storage from 'redux-persist/lib/storage';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+
+import { filtersReducer } from './filtersSlice';
 import { carsApi } from './operations';
 
-export const store = configureStore({
-  reducer: {
-    [carsApi.reducerPath]: carsApi.reducer,
-  },
+const reducers = combineReducers({
+  [carsApi.reducerPath]: carsApi.reducer,
+  filters: filtersReducer,
+});
 
+const persistConfig = {
+  key: 'root',
+  version: 1,
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, reducers);
+
+export const store = configureStore({
+  reducer: persistedReducer,
   middleware: getDefaultMiddleware =>
-    getDefaultMiddleware().concat(carsApi.middleware),
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }).concat(carsApi.middleware),
 });
 
-setupListeners(store.dispatch);
+export let persistor = persistStore(store);