### 如何在
React项目中使用Ant Design和Redux进行描述性开发
#### 使用Ant Design提升UI组件库体验
为了增强用户体验并简化样式管理，在
React应用中集成Ant Design是一个明智的选择。安装Ant Design可以通过Yarn完成：
```bash
yarn add
antd
```
接着可以在`index
.js`文件里引入
全局CSS资源，确保整个应用程序都能访问到这些样式。
```javascript
import '
antd/dist/reset
.css';
```
对于具体的页面布局设计，可以利用Ant Design提供的各种预构建组件来快速搭建界面结构。例如创建一个简单的卡片列表展示数据项[^1]。
#### 集成Redux用于状态管理
通过Redux Toolkit简化复杂的状态逻辑处理流程。首先初始化store
配置如下所示：
```bash
yarn add @reduxjs/toolkit
react-redux
```
定义slice模块化存储片段，这里以Pokemon为例说明如何操作异步请求获取远程API的数据源，并将其保存至本地缓存供前端调用显示。
```javascript
// src/features/pokemonSlice
.js
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import axios from 'axios'
export const fetchPokemons = createAsyncThunk(
'pokemon/fetchPokemons',
async () => {
const response = await axios
.get('https://pokeapi
.co/api/v2/pokemon?limit=10')
return response
.data
.results
.map((item) =>
axios
.get(item
.url)
.then(({ data }) => ({
name: data
.name,
image: data
.sprites
.front_default,
}))
)
}
)
const pokemonSlice = createSlice({
name: 'pokemon',
initialState: {
entities: [],
loading: false,
error: null,
},
reducers: {},
extraReducers(builder) {
builder
.addCase(fetchPokemons
.pending, (state) => {
state
.loading = true;
state
.error = null;
})
.addCase(fetchPokemons
.fulfilled, (state, action) => {
Promise
.all(action
.payload)
.then((results) => {
state
.entities = results
.filter(Boolean);
state
.loading = false;
});
})
.addCase(fetchPokemons
.rejected, (state, action) => {
state
.loading = false;
state
.error = action
.error
.message || 'Failed to load Pokémons
.';
});
},
})
export default pokemonSlice
.reducer;
```
最后一步是在根目录下的入口文件`index
.js`内组合所有必要的部分，包括提供者Provider包裹顶层节点以便于子组件能够订阅store变化事件；同时触发初次加载动作函数fetchPokemons()从而实现自动拉取初始数据显示给用户查看。
```javascript
import
React from '
react';
import
ReactDOM from '
react-dom/client';
import '
./index
.css'; // 自定义样式表路径
import App from '
./App';
import { Provider, useDispatch } from '
react-redux';
import {
configureStore } from '@reduxjs/toolkit';
import pokemonReducer from '
./features/pokemonSlice';
const store =
configureStore({
reducer: {
pokemon: pokemonReducer,
},
});
function RootComponent() {
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(fetchPokemons());
}, [dispatch]);
return (
<Provider store={store}>
<App />
</Provider>
);
}
const rootElement = document
.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root =
ReactDOM
.createRoot(rootElement);
root
.render(<RootComponent />);
```
在 Ant Design 的 `src/index.js` 文件中配置全局消息提示，设定了消息的持续时间和最大显示数量，当消息超过限制时，最早的会自动关闭。配置还包括了消息距离页面顶部的距离。
扫一扫
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
