// actionTypes.js
export const FETCH_TEXT_REQUEST = 'FETCH_TEXT_REQUEST';
export const FETCH_TEXT_SUCCESS = 'FETCH_TEXT_SUCCESS';
export const FETCH_TEXT_FAILURE = 'FETCH_TEXT_FAILURE';

// actions.js
import {
  FETCH_TEXT_REQUEST,
  FETCH_TEXT_SUCCESS,
  FETCH_TEXT_FAILURE
} from './actionTypes';

export const fetchText = (url) => {
  return async (dispatch) => {
    dispatch({ type: FETCH_TEXT_REQUEST });
    
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const text = await response.text(); // 获取纯文本
      
      dispatch({
        type: FETCH_TEXT_SUCCESS,
        payload: text
      });
    } catch (error) {
      dispatch({
        type: FETCH_TEXT_FAILURE,
        payload: error.message
      });
    }
  };
};

// reducer.js
import {
  FETCH_TEXT_REQUEST,
  FETCH_TEXT_SUCCESS,
  FETCH_TEXT_FAILURE
} from './actionTypes';

const initialState = {
  loading: false,
  text: '',
  error: ''
};

export const textReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_TEXT_REQUEST:
      return {
        ...state,
        loading: true,
        error: ''
      };
    case FETCH_TEXT_SUCCESS:
      return {
        ...state,
        loading: false,
        text: action.payload,
        error: ''
      };
    case FETCH_TEXT_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchText } from './actions';

const TextComponent = () => {
  const { loading, text, error } = useSelector(state => state.text);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchText('https://example.com/api/text'));
  }, [dispatch]);

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

  return (
    <div>
      <h1>获取的纯文本内容：</h1>
      <pre>{text}</pre>
    </div>
  );
};

export default TextComponent;