Separate selected Region/Type/Sort/SearchInput out of Pokedex, so it become easier for testing in storybook

src/App.tsx

@@ -3,13 +3,24 @@ import './App.css';
 import Header from 'components/Header';
 import Pokedex from 'features/Pokedex';
 import Filters from 'features/Filters';
+import { useAppSelector } from 'app/hooks';
 
 function App() {
+  const selectedRegion = useAppSelector(state => state.filter.selectedRegion);
+  const selectedType = useAppSelector(state => state.filter.selectedType);
+  const selectedSort = useAppSelector(state => state.filter.selectedSort);
+  const selectedSearchInput = useAppSelector(state => state.filter.searchInput);
+
   return (
     <div className="App app_container">
       <Header />
       <Filters />
-      <Pokedex />
+      <Pokedex
+        selectedRegion={selectedRegion}
+        selectedType={selectedType}
+        selectedSort={selectedSort}
+        searchInput={selectedSearchInput}
+      />
     </div>
   );
 }

src/features/Filters/Filters.tsx

@@ -73,7 +73,6 @@ const Filters = () => {
     dispatch(setSortOptions(fetchedSortOptions));
 
     dispatch(setSelectedRegion(fetchedRegionOptions[0].region));
-    dispatch(fetchPokemonsInTheRegion(fetchedRegionOptions[0].region));
 
     dispatch(setSelectedSort(fetchedSortOptions[0].value));
   }, []);

src/features/Pokedex/Pokedex.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PokemonCard, { PokemonCardProps } from 'components/PokemonCard';
 import Loading from 'components/Loading';
 
-import { useAppSelector } from 'app/hooks';
+import { useAppSelector, useAppDispatch } from 'app/hooks';
+import { fetchPokemonsInTheRegion } from './pokedexSlice';
 
 export const filterPokemonCardsByType = (
   pokemonList: PokemonCardProps[],
@@ -39,10 +40,20 @@ export const searchPokemonCardsByName = (
   );
 };
 
-const Pokedex = () => {
+export interface PokedexProps {
-  const selectedType = useAppSelector(state => state.filter.selectedType);
+  selectedRegion: string;
-  const selectedSort = useAppSelector(state => state.filter.selectedSort);
+  selectedType: string;
-  const searchInput = useAppSelector(state => state.filter.searchInput);
+  selectedSort: string;
+  searchInput: string;
+}
+
+const Pokedex = ({
+  selectedRegion,
+  selectedType,
+  selectedSort,
+  searchInput,
+}: PokedexProps) => {
+  const dispatch = useAppDispatch();
 
   const isLoadingPokemons = useAppSelector(
     state => state.pokedex.isLoadingPokemons,
@@ -62,6 +73,10 @@ const Pokedex = () => {
     searchInput,
   );
 
+  useEffect(() => {
+    dispatch(fetchPokemonsInTheRegion(selectedRegion));
+  }, [selectedRegion]);
+
   return (
     <>
       {isLoadingPokemons ? (