import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Tabs } from 'antd';
import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import 'antd/dist/antd.css';
const { TabPane } = Tabs;
// 创建初始状态和异步操作的 Redux Slice
const tabSlice = createSlice({
name: 'tab',
initialState: {
activeTab: 'tab1',
tab1Data: [],
tab2Data: [],
isLoading: false,
error: null,
},
reducers: {
setActiveTab(state, action) {
state.activeTab = action.payload;
},
fetchDataStart(state) {
state.isLoading = true;
state.error = null;
},
fetchDataSuccess(state, action) {
state.isLoading = false;
if (state.activeTab === 'tab1') {
state.tab1Data = action.payload;
} else {
state.tab2Data = action.payload;
}
},
fetchDataFailure(state, action) {
state.isLoading = false;
state.error = action.payload;
},
},
});
// 异步数据获取的 Redux Thunk 操作
const fetchData = createAsyncThunk('tab/fetchData', async (_, { dispatch }) => {
dispatch(fetchDataStart());
try {
const response = await axios.get('your_api_endpoint');
dispatch(fetchDataSuccess(response.data));
} catch (error) {
dispatch(fetchDataFailure(error.message));
}
});
// 获取 Redux 状态和触发异步操作的自定义 hook
const useTabData = () => {
const dispatch = useDispatch();
const { activeTab, tab1Data, tab2Data, isLoading, error } = useSelector(
(state) => state.tab
);
const onTabChange = (activeKey) => {
dispatch(setActiveTab(activeKey));
dispatch(fetchData());
};
return { activeTab, tab1Data, tab2Data, isLoading, error, onTabChange };
};
const store = configureStore({
reducer: { tab: tabSlice.reducer },
});
const App = () => {
const { activeTab, tab1Data, tab2Data, isLoading, error, onTabChange } = useTabData();
return (
<Tabs activeKey={activeTab} onChange={onTabChange}>
<TabPane tab="Tab 1" key="tab1">
{isLoading ? (
<div>Loading...</div>
) : error ? (
<div>Error: {error}</div>
) : (
<ul>
{tab1Data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
)}
</TabPane>
<TabPane tab="Tab 2" key="tab2">
{isLoading ? (
<div>Loading...</div>
) : error ? (
<div>Error: {error}</div>
) : (
<ul>
{tab2Data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
)}
</TabPane>
</Tabs>
);
};