一系列链接的http请求的React钩子和RTK模式

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { createAsyncThunk, createSlice, configureStore } from '@reduxjs/toolkit';
import axios from 'axios';

// 定义异步的http请求操作
const fetchLinks = createAsyncThunk('links/fetchLinks', async () => {
  const response = await axios.get('http://example.com/links');
  return response.data;
});

// 创建slice
const linksSlice = createSlice({
  name: 'links',
  initialState: {
    data: [],
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchLinks.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchLinks.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchLinks.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

// 创建store并添加slice
const store = configureStore({
  reducer: {
    links: linksSlice.reducer,
  },
});

// 组件
const App = () => {
  const dispatch = useDispatch();
  const links = useSelector((state) => state.links.data);
  const loading = useSelector((state) => state.links.loading);
  const error = useSelector((state) => state.links.error);

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

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <ul>
      {links.map((link) => (
        <li key={link.id}>{link.title}</li>
      ))}
    </ul>
  );
};

// 渲染根组件
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);