refactor: upgrade redux toolkit

package.json

@@ -13,7 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@reduxjs/toolkit": "^1.8.1",
+    "@reduxjs/toolkit": "^2.0.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^14.1.1",
@@ -24,7 +24,7 @@
     "pokemon": "^2.3.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-redux": "^8.0.1",
+    "react-redux": "^9.0.4",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.2",

src/features/pokemon-details/slice.ts

@@ -6,14 +6,16 @@ import type { PokemonDetailsError, PokemonSpecies } from "./types";
 import type { RootState } from "../../redux/store";
 import * as thunks from "./thunks";
 
-const pokemonSpeciesEntityAdapter = createEntityAdapter<PokemonSpecies>({
-  selectId: (species) => species.id,
-  sortComparer: (a, b) => (a.order && b.order ? a.order - b.order : 0),
-});
+const pokemonSpeciesEntityAdapter = createEntityAdapter<PokemonSpecies, number>(
+  {
+    selectId: (species) => species.id,
+    sortComparer: (a, b) => (a.order && b.order ? a.order - b.order : 0),
+  }
+);
 
 const initialState: {
   error: PokemonDetailsError | undefined;
-  species: LoadableResource<EntityState<PokemonSpecies>>;
+  species: LoadableResource<EntityState<PokemonSpecies, number>>;
 } = {
   error: undefined,
   species: {

src/features/pokemon-page/pokemon-card/hooks.ts

@@ -1,9 +1,8 @@
-import type { EntityId } from "@reduxjs/toolkit";
 import React from "react";
 import { useAppSelector } from "../../../redux/hooks";
 import { selectors } from "../slice";
 
-export function usePokemonInfo(pokemonName: EntityId) {
+export function usePokemonInfo(pokemonName: string) {
   const pokemonInfoSelectors = React.useMemo(
     () => selectors.makeInfoSelectors(),
     []

src/features/pokemon-page/pokemon-card/index.tsx

@@ -1,19 +1,18 @@
-import type { EntityId } from "@reduxjs/toolkit";
 import ResourceState from "../../../components/resource-state";
 import type { LoadableResource } from "../../../redux/types";
 import type { PokemonInfo } from "../types";
 import { usePokemonInfo } from "./hooks";
 import TypePill from "../../../components/pokemon-type-pill";
 import "./style.scss";
 
-export default function PokemonCard(props: { pokemonName: EntityId }) {
+export default function PokemonCard(props: { pokemonName: string }) {
   const pokemonInfo = usePokemonInfo(props.pokemonName);
 
   return <PokemonCardData info={pokemonInfo} {...props} />;
 }
 
 export function PokemonCardData(props: {
-  pokemonName: EntityId;
+  pokemonName: string;
   info: LoadableResource<PokemonInfo> | undefined;
 }) {
   const backgroundImageUrl =

src/features/pokemon-page/pokemon-card/pokemon-card.test.tsx

@@ -95,7 +95,6 @@ describe("Pokemon card component", () => {
         pokemonOrder: 1,
       });
 
-      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
       expect(screen.getByText(/error/i)).toBeInTheDocument();
     });
   });

src/features/pokemon-page/pokemon-list/pokemon-list.test.tsx

@@ -178,7 +178,6 @@ describe("Pokemon list component", () => {
           name: /prev/i,
         })
       );
-      await waitForElementToBeRemoved(screen.queryAllByRole("alert"));
 
       await waitFor(() => {
         const itemsContent = Array.from(

src/features/pokemon-page/service.ts

@@ -41,11 +41,11 @@ export function getPaginationInfo(
 }
 
 export function idFromUrl(url: string) {
-  return url.match(/(\d+)\/$/)?.[1];
+  return Number(url.match(/(\d+)\/$/)?.[1]);
 }
 
 export function speciesUrlSelector(
-  state: EntityState<LoadableResource<PokemonInfo>>,
+  state: EntityState<LoadableResource<PokemonInfo>, string>,
   pokemonName: string
 ) {
   return state.entities[pokemonName]?.data?.species?.url;

src/features/pokemon-page/slice.ts

@@ -7,23 +7,24 @@ import type { RootState } from "../../redux/store";
 import * as thunks from "./thunks";
 import { getPaginationInfo, idFromUrl, speciesUrlSelector } from "./service";
 
-const pokemonListEntityAdapter = createEntityAdapter<PokemonPageItem>({
+const pokemonListEntityAdapter = createEntityAdapter<PokemonPageItem, string>({
   selectId: (pokemon) => pokemon.name,
   sortComparer: (a, b) => a.name.localeCompare(b.name),
 });
 
 const pokemonInfoEntityAdapter = createEntityAdapter<
-  LoadableResource<PokemonInfo>
+  LoadableResource<PokemonInfo>,
+  string
 >({
   selectId: (pokemon) => pokemon.data.name,
   sortComparer: (a, b) =>
     a.data.order && b.data.order ? a.data.order - b.data.order : 0,
 });
 
-const initialState: LoadableResource<EntityState<PokemonPageItem>> & {
+const initialState: LoadableResource<EntityState<PokemonPageItem, string>> & {
   pageCount: number;
   currentPage: number;
-  info: EntityState<LoadableResource<PokemonInfo>>;
+  info: EntityState<LoadableResource<PokemonInfo>, string>;
   lastUrlFetched: string | null;
   nextUrl: string | null;
   prevUrl: string | null;

src/pages/routes.ts

@@ -1,9 +1,8 @@
-import type { EntityId } from "@reduxjs/toolkit";
 import { generatePath } from "react-router-dom";
 
 export const pokemonDetailsRoute = {
   path: "details/:pokemonName",
-  generate(pokemonName: EntityId) {
+  generate(pokemonName: string) {
     return generatePath(this.path, { pokemonName: pokemonName as string });
   },
 };

src/redux/store.ts

@@ -12,10 +12,12 @@ type ReducerState<T extends ReducersMapObject> = {
 export type RootState = ReducerState<StaticReducers> &
   ReducerState<LazyReducers>;
 
-export function buildStore(preloadedState?: Partial<RootState>) {
+export function buildStore(
+  preloadedState?: ReducerState<StaticReducers> | Partial<RootState>
+) {
   const store = configureStore({
     reducer: staticReducers,
-    preloadedState,
+    preloadedState: preloadedState as ReducerState<StaticReducers>,
   });
 
   const asyncReducers: ReducersMapObject = {};