Jason
/
pokertk
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

initialize Filter by setSelectedRegion and fetchPokemonsInTheRegion

develop
Jason Zhu 2023-04-11 18:12:38 +10:00
parent 790c7828b1
commit 73fa644a55
2 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/features/Pokedex/Filters/Filters.tsx
View File

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

23
src/features/Pokedex/pokedexSlice.ts
View File

@ -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 type { Slice, PayloadAction } from '@reduxjs/toolkit';
import { PokedexState, RegionPokemonRange } from 'features/Pokedex/types/slice'; 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 { getStartAndEndIdsForRegion } from './utils';
import { PokemonResponseData } from './types/api'; import { PokemonResponseData } from './types/api';
import { pokedexApi } from './pokedexApi'; import { pokedexApi } from './pokedexApi';
import { RootState } from '../../app/store';
const regionPokemonRange: RegionPokemonRange[] = [ const regionPokemonRange: RegionPokemonRange[] = [
{ region: 'kanto', startId: 1, endId: 151 }, { region: 'kanto', startId: 1, endId: 151 },
@ -24,14 +25,15 @@ const sortOptions = [
pokedexApi.endpoints.getTypeList.initiate(); // initialize type list fetching pokedexApi.endpoints.getTypeList.initiate(); // initialize type list fetching
// typesData will be used in Filters.tsx // 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 { startId, endId } = getStartAndEndIdsForRegion(region, regionOptions);
const pokemonIds = Array.from( const pokemonIds = Array.from(
{ length: endId - startId + 1 }, { length: endId - startId + 1 },
(_, i) => i + startId, (_, i) => i + startId,
@ -49,8 +51,7 @@ export const fetchPokemonsInTheRegion = createAsyncThunk(
(pokemon: { data: PokemonResponseData }) => pokemon.data, (pokemon: { data: PokemonResponseData }) => pokemon.data,
); );
return pokemonListData; return pokemonListData;
}, });
);
const initialState: PokedexState = { const initialState: PokedexState = {
regionOptions: regionPokemonRange, regionOptions: regionPokemonRange,