Created pokedexSlice and pokedexApi to perform getPokemonList

src/App.tsx

@@ -3,8 +3,18 @@ import './App.css';
 import Header from 'components/Header';
 import Filters from './features/Pokedex/Filters/Filters';
 import { Pokedex } from './features/Pokedex/Pokedex';
+import { useGetPokemonListQuery } from './features/Pokedex/pokedexApi';
+import Loading from './components/Loading';
 
 function App() {
+  const { data, error, isLoading } = useGetPokemonListQuery(100);
+  if (isLoading) {
+    return (
+      <div className="App app_container">
+        <Loading />
+      </div>
+    );
+  }
   return (
     <div className="App app_container">
       <Header />

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/store.ts

@@ -0,0 +1,19 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { pokedexApi } from 'features/Pokedex/pokedexApi';
+import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
+
+export const store = configureStore({
+  reducer: {
+    // component slices
+    pokedex: pokedexSlice.reducer,
+
+    // api
+    [pokedexApi.reducerPath]: pokedexApi.reducer,
+  },
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat(pokedexApi.middleware),
+  devTools: true,
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/components/Loading.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <div className="loading">
+      <div className="loading__container">
+        <div className="loading__text">Loading...</div>
+        <div className="gif_container">
+          <img
+            src="http://i.gifer.com/VgI.gif"
+            alt="loading gif"
+            className="loading__gif noselect"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

src/features/Pokedex/Pokemon/Pokemon.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Pokemon.css';
 
-interface PokemonProps {
+export interface PokemonProps {
   name: string;
   number: string;
   image: string;

src/features/Pokedex/pokedexApi.ts

@@ -0,0 +1,14 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import type { PokemonProps as Pokemon } from './Pokemon';
+
+export const pokedexApi = createApi({
+  reducerPath: 'pokedexApi',
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  endpoints: builder => ({
+    getPokemonList: builder.query<Pokemon[], number>({
+      query: limit => `pokemon?limit=${limit}`,
+    }),
+  }),
+});
+
+export const { useGetPokemonListQuery } = pokedexApi;

src/features/Pokedex/pokedexSlice.ts

@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from 'app/store';
+
+import { PokemonProps as Pokemon } from './Pokemon';
+
+interface PokedexState {
+  pokemonList: Pokemon[];
+}
+
+const initialState: PokedexState = {
+  pokemonList: [],
+};
+
+export const pokedexSlice = createSlice({
+  name: 'pokedex',
+  initialState,
+  reducers: {
+    setPokemonList: (state, action: PayloadAction<Pokemon[]>) => {
+      state.pokemonList = action.payload;
+    },
+  },
+});
+
+export const { setPokemonList } = pokedexSlice.actions;
+
+export default pokedexSlice.reducer;

src/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import 'index.css';
+import App from 'App';
+import { store } from 'app/store';
+import { Provider } from 'react-redux';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
@@ -9,7 +11,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
 );