担任高级前端开发人员翻译站点

提示：

我希望你担任高级前端开发人员。我将描述您将使用以下工具编写项目代码的项目详细信息：Create React App、yarn、Ant Design、List、Redux Toolkit、createSlice、thunk、axios。您应该将文件合并到单个 index.js 文件中，别无其他。不要写解释。我的第一个请求是“创建 Pokemon 应用程序，列出带有来自 PokeAPI 精灵端点的图像的宠物小精灵”

回答：

“`javascript
import React, { useEffect } from ‘react’;
import ReactDOM from ‘react-dom’;
import { createStore, applyMiddleware } from ‘redux’;
import { Provider, useDispatch, useSelector } from ‘react-redux’;
import { createSlice, configureStore, createAsyncThunk } from ‘@reduxjs/toolkit’;
import axios from ‘axios’;
import { List } from ‘antd’;

const pokemonSlice = createSlice({
name: ‘pokemon’,
initialState: {
pokemons: [],
loading: false,
error: null,
},
reducers: {
fetchPokemonsStart(state) {
state.loading = true;
state.error = null;
},
fetchPokemonsSuccess(state, action) {
state.pokemons = action.payload;
state.loading = false;
state.error = null;
},
fetchPokemonsError(state, action) {
state.loading = false;
state.error = action.payload;
},
},
});

const { fetchPokemonsStart, fetchPokemonsSuccess, fetchPokemonsError } = pokemonSlice.actions;

const fetchPokemons = createAsyncThunk(‘pokemon/fetchPokemons’, async () => {
try {
const response = await axios.get(‘https://pokeapi.co/api/v2/pokemon’);
return response.data.results;
} catch (error) {
throw new Error(‘Failed to fetch pokemons.’);
}
});

const store = configureStore({
reducer: pokemonSlice.reducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

const PokemonApp = () => {
const dispatch = useDispatch();
const pokemons = useSelector((state) => state.pokemon.pokemons);
const loading = useSelector((state) => state.pokemon.loading);
const error = useSelector((state) => state.pokemon.error);

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

if (loading) {
return <div>Loading…</div>;
}

if (error) {
return <div>Error: {error.message}</div>;
}

return (
<List
dataSource={pokemons}
renderItem={(pokemon) => (
<List.Item>
<img src={pokemon.url} alt={pokemon.name} />
</List.Item>
)}
/>
);
};

ReactDOM.render(
<Provider store={store}>
<PokemonApp />
</Provider>,
document.getElementById(‘root’)
);
“`