前端开发

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>
  );
};