使用 React、Redux 和 Ant Design 创建 Pokemon 应用程序

import React, { useEffect } from 'react';
import { List, Avatar } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPokemons } from './redux/pokemonSlice';
import './App.css';

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

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

  return (
    <div className="App">
      <h1>Pokemon List</h1>
      <List
        itemLayout="horizontal"
        dataSource={pokemons}
        renderItem={(pokemon) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={pokemon.image} />}
              title={<a href={pokemon.url}>{pokemon.name}</a>}
              description={pokemon.type.join(', ')}
            />
          </List.Item>
        )}
      />
    </div>
  );
}

export default App;

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  pokemons: [],
  status: 'idle',
  error: null,
};

export const fetchPokemons = createAsyncThunk('pokemon/fetchPokemons', async () => {
  const response = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=10');
  const pokemons = await Promise.all(
    response.data.results.map(async (result) => {
      const res = await axios.get(result.url);
      const { name, sprites, types } = res.data;
      return {
        id: res.data.id,
        name,
        image: sprites.front_default,
        url: `https://pokeapi.co/api/v2/pokemon/${res.data.id}`,
        type: types.map((type) => type.type.name),
      };
    })
  );
  return pokemons;
});

const pokemonSlice = createSlice({
  name: 'pokemon',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPokemons.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPokemons.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.pokemons = state.pokemons.concat(action.payload);
      })
      .addCase(fetchPokemons.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default pokemonSlice.reducer;