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,14 +25,15 @@ const sortOptions = [
 pokedexApi.endpoints.getTypeList.initiate(); // initialize type list fetching
 // typesData will be used in Filters.tsx
 
-export const fetchPokemonsInTheRegion = createAsyncThunk(
-  'pokedex/setSelectedRegion',
-  async (region: string, thunkAPI) => {
-    const { dispatch } = thunkAPI;
-    const { startId, endId } = getStartAndEndIdsForRegion(
-      region,
-      regionPokemonRange,
-    );
+export const fetchPokemonsInTheRegion = createAsyncThunk<
+  PokemonResponseData[],
+  string,
+  { state: RootState }
+>('pokedex/setSelectedRegion', async (region: string, thunkAPI) => {
+  const { dispatch, getState } = thunkAPI;
+  const regionOptions = getState().pokedex.regionOptions;
+
+  const { startId, endId } = getStartAndEndIdsForRegion(region, regionOptions);
   const pokemonIds = Array.from(
     { length: endId - startId + 1 },
     (_, i) => i + startId,
@@ -49,8 +51,7 @@ export const fetchPokemonsInTheRegion = createAsyncThunk(
     (pokemon: { data: PokemonResponseData }) => pokemon.data,
   );
   return pokemonListData;
-  },
-);
+});
 
 const initialState: PokedexState = {
   regionOptions: regionPokemonRange,