Axios-Redux in React to a Express endpoint-同时触发.then和.catch

// 安装所需的模块
// npm install axios redux react-redux

// 导入所需的模块
import axios from 'axios';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// 创建Redux store
const initialState = {
  data: null,
  error: null
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    case 'SET_ERROR':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

// 创建React组件
class MyComponent extends React.Component {
  componentDidMount() {
    // 发送Axios请求
    axios.get('/api/data')
      .then(response => {
        // 处理成功响应的数据
        this.props.setData(response.data);
      })
      .catch(error => {
        // 处理错误响应
        this.props.setError(error.message);
      });
  }

  render() {
    // 渲染组件
    return (
      <div>
        {this.props.data && <p>Data: {this.props.data}</p>}
        {this.props.error && <p>Error: {this.props.error}</p>}
      </div>
    );
  }
}

// 定义Redux action creators
const setData = (data) => ({
  type: 'SET_DATA',
  payload: data
});

const setError = (error) => ({
  type: 'SET_ERROR',
  payload: error
});

// 连接React组件和Redux store
const mapStateToProps = (state) => ({
  data: state.data,
  error: state.error
});

const mapDispatchToProps = {
  setData,
  setError
};

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

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