Remove calling async thunk from Filter component using dispatch, but call it directly in slice

src/features/Filters/Filters.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
-import { fetchPokemonsInTheRegion } from 'features/Pokedex/pokedexSlice';
 
 import {
   setSelectedRegion,
@@ -56,7 +55,6 @@ const Filters = () => {
               name="regionSelect"
               onChange={e => {
                 dispatch(setSelectedRegion(e.target.value));
-                dispatch(fetchPokemonsInTheRegion(e.target.value));
               }}
               value={selectedRegion}
             >

src/features/Filters/filterSlice.ts

@@ -7,6 +7,7 @@ import {
 import { FilterState } from './types/slice';
 import { RegionPokemonRange } from './types/slice';
 import { pokeApi } from 'app/services/pokeApi';
+import { fetchPokemonsInTheRegion } from 'features/Pokedex/pokedexSlice';
 
 pokeApi.endpoints.getTypeList.initiate(); // initialize type list fetching
 
@@ -53,6 +54,7 @@ export const filterSlice: Slice<FilterState> = createSlice({
   reducers: {
     setSelectedRegion: (state, action: PayloadAction<string>) => {
       state.selectedRegion = action.payload;
+      fetchPokemonsInTheRegion(state.selectedRegion);
     },
     setSelectedType: (state, action: PayloadAction<string>) => {
       state.selectedType = action.payload;