Prompt Title: Tạo ứng dụng Pokemon.

Chào bạn, tôi rất vui được làm việc với bạn và hỗ trợ bạn trong dự án này. Dưới đây là mã mẫu để tạo ứng dụng Pokemon của bạn sử dụng các công cụ và thư viện như yêu cầu:

javascriptCopy code
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { List, Avatar } from 'antd';
import { createSlice, configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import axios from 'axios';

const { Item } = List;

const pokemonSlice = createSlice({
  name: 'pokemon',
  initialState: {
    pokemons: [],
  },
  reducers: {
    setPokemons: (state, action) => {
      state.pokemons = action.payload;
    },
  },
});

const { setPokemons } = pokemonSlice.actions;

const store = configureStore({
  reducer: pokemonSlice.reducer,
  middleware: [thunk],
});

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

  useEffect(() => {
    axios.get('https://pokeapi.co/api/v2/pokemon?limit=20').then((response) => {
      const pokemonList = response.data.results;
      dispatch(setPokemons(pokemonList));
    });
  }, [dispatch]);

  return (
    <List
      itemLayout="horizontal"
      dataSource={pokemons}
      renderItem={(pokemon) => (
        <Item>
          <Item.Meta
            avatar={<Avatar src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.url.split('/')[6]}.png`} />}
            title={pokemon.name}
          />
        </Item>
      )}
    />
  );
}

export default App;

Lưu ý: Bạn cần cài đặt các thư viện và công cụ như Create React App, yarn, Ant Design, Redux Toolkit, createSlice, thunk và axios trước khi chạy ứng dụng.

Hy vọng mã mẫu này sẽ giúp bạn có được ứng dụng Pokemon của mình. Nếu bạn có bất kỳ câu hỏi hoặc thắc mắc nào, hãy liên hệ với tôi để được hỗ trợ thêm.