好的，以下是一个类似宝可梦游戏的代码示例： ```javascript // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import axios from 'axios'; import { List } from 'antd'; // 创建 Redux store const store = configureStore({ reducer: { pokemon: pokemonReducer, }, }); // 创建 Pokemon 列表的 Slice const pokemonSlice = createSlice({ name: 'pokemon', initialState: { pokemons: [], loading: false }, reducers: { setLoading(state, action) { state.loading = action.payload; }, setPokemons(state, action) { state.pokemons = action.payload; }, }, }); // 异步获取 Pokemon 数据的 thunk export const fetchPokemons = createAsyncThunk('pokemon/fetchPokemons', async () => { const response = await axios.get('https://api.example.com/pokemons'); return response.data; }); // 将异步 thunk 集成到 Slice 中 const { setLoading, setPokemons } = pokemonSlice.actions; pokemonSlice.extraReducers = (builder) => { builder .addCase(fetchPokemons.pending, (state) => { state.loading = true; }) .addCase(fetchPokemons.fulfilled, (state, action) => { state.loading = false; state.pokemons = action.payload; }); }; // 创建 Pokemon 列表组件 const PokemonList = () => { const pokemons = useSelector((state) => state.pokemon.pokemons); const loading = useSelector((state) => state.pokemon.loading); useEffect(() => { dispatch(fetchPokemons()); }, [dispatch]); return ( ( {pokemon.name} )} /> ); }; // 渲染应用 ReactDOM.render( , document.getElementById('root') ); ``` 请注意，此代码仅为示例，实际项目中可能还需要进一步的组件、样式和逻辑。希望这能帮到您！