AI创作问答(高级版)
好的，以下是一个类似宝可梦游戏的代码示例：
```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')
);
```
请注意，此代码仅为示例，实际项目中可能还需要进一步的组件、样式和逻辑。希望这能帮到您！
金宣小助手
官网微信公众号
