initialize Filter by setSelectedRegion and fetchPokemonsInTheRegion

src/features/Pokedex/Filters/Filters.tsx

@@ -39,13 +39,10 @@ const Filters = () => {
   const { data: typesData, isLoading: typesLoading } = useGetTypeListQuery();
 
   useEffect(() => {
-    console.log('Filters.tsx useEffect');
+    dispatch(setSelectedRegion('kanto'));
+    dispatch(fetchPokemonsInTheRegion('kanto'));
   }, []);
 
-  useEffect(() => {
-    console.log('REGION changed');
-  }, [selectedRegion]);
-
   const optionElements =
     createRegionPokemonListOptionElements(regionPokemonList);
 

src/features/Pokedex/pokedexSlice.ts

@@ -1,4 +1,4 @@
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, Dispatch } from '@reduxjs/toolkit';
 import type { Slice, PayloadAction } from '@reduxjs/toolkit';
 
 import { PokedexState, RegionPokemonRange } from 'features/Pokedex/types/slice';
@@ -6,6 +6,7 @@ import { PokedexState, RegionPokemonRange } from 'features/Pokedex/types/slice';
 import { getStartAndEndIdsForRegion } from './utils';
 import { PokemonResponseData } from './types/api';
 import { pokedexApi } from './pokedexApi';
+import { RootState } from '../../app/store';
 
 const regionPokemonRange: RegionPokemonRange[] = [
   { region: 'kanto', startId: 1, endId: 151 },
@@ -24,33 +25,33 @@ const sortOptions = [
 pokedexApi.endpoints.getTypeList.initiate(); // initialize type list fetching
 // typesData will be used in Filters.tsx
 
-export const fetchPokemonsInTheRegion = createAsyncThunk(
+export const fetchPokemonsInTheRegion = createAsyncThunk<
-  'pokedex/setSelectedRegion',
+  PokemonResponseData[],
-  async (region: string, thunkAPI) => {
+  string,
-    const { dispatch } = thunkAPI;
+  { state: RootState }
-    const { startId, endId } = getStartAndEndIdsForRegion(
+>('pokedex/setSelectedRegion', async (region: string, thunkAPI) => {
-      region,
+  const { dispatch, getState } = thunkAPI;
-      regionPokemonRange,
+  const regionOptions = getState().pokedex.regionOptions;
-    );
+
-    const pokemonIds = Array.from(
+  const { startId, endId } = getStartAndEndIdsForRegion(region, regionOptions);
-      { length: endId - startId + 1 },
+  const pokemonIds = Array.from(
-      (_, i) => i + startId,
+    { length: endId - startId + 1 },
-    );
+    (_, i) => i + startId,
-    // use pokemonIds to fetch pokemon data using getPokemonQuery and store in state
+  );
-    const pokemonList = await Promise.all(
+  // use pokemonIds to fetch pokemon data using getPokemonQuery and store in state
-      pokemonIds.map(
+  const pokemonList = await Promise.all(
-        id =>
+    pokemonIds.map(
-          dispatch(pokedexApi.endpoints.getPokemon.initiate(id)) as Promise<{
+      id =>
-            data: PokemonResponseData;
+        dispatch(pokedexApi.endpoints.getPokemon.initiate(id)) as Promise<{
-          }>,
+          data: PokemonResponseData;
-      ),
+        }>,
-    );
+    ),
-    const pokemonListData = pokemonList.map(
+  );
-      (pokemon: { data: PokemonResponseData }) => pokemon.data,
+  const pokemonListData = pokemonList.map(
-    );
+    (pokemon: { data: PokemonResponseData }) => pokemon.data,
-    return pokemonListData;
+  );
-  },
+  return pokemonListData;
-);
+});
 
 const initialState: PokedexState = {
   regionOptions: regionPokemonRange,