I want you to act as a Senior Frontend developer. I will describe a project details you will code project with this tools: Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. You should merge files in single index.js file and nothing else. Do not write explanations. My first request is "Create Pokemon App that lis…

index.js

// I want you to act as a Senior Frontend developer. I will describe a project details you will code project with this tools: Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. You should merge files in single index.js file and nothing else. Do not write explanations. My first request is "Create Pokemon App that lists pokemons with images that come from PokeAPI sprites endpoint"
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { Provider, useDispatch, useSelector } from "react-redux";
import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from "redux-thunk";
import axios from "axios";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { List } from "antd";

const fetchPokemons = createAsyncThunk("pokemons/fetchPokemons", async () => {
  const response = await axios.get(
    "https://pokeapi.co/api/v2/pokemon?limit=151"
  );
  return response.data.results;
});

const pokemonsSlice = createSlice({
  name: "pokemons",
  initialState: {
    list: [],
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: {
    [fetchPokemons.pending]: (state) => {
      state.loading = true;
    },
    [fetchPokemons.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.loading = false;
      state.error = null;
    },
    [fetchPokemons.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error;
    },
  },
});

export const { reducer: pokemonsReducer } = pokemonsSlice;

const rootReducer = combineReducers({
  pokemons: pokemonsReducer,
});

const store = createStore(rootReducer, applyMiddleware(thunk));

const App = () => {
  const dispatch = useDispatch();
  const pokemons = useSelector((state) => state.pokemons.list);

  useEffect(() => {
    dispatch(fetchPokemons());
  }, [dispatch]);

  return (
    <List
      dataSource={pokemons}
      renderItem={(pokemon) => (
        <List.Item>
          <img
            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
              pokemon.url.split("/")[pokemon.url.split("/").length - 2]
            }.png`}
            alt="Pokemon"
          />
          <span>{pokemon.name}</span>
        </List.Item>
      )}
      rowKey="id"
    />
  );
};

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

screenshot.png