react-redux，thunk中间件安装，class component - error“操作必须是纯对象。而实际的类型是：'Promise'”分派

npm install react redux

npm install react-redux redux-thunk

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 替换为你的根reducer文件路径

const store = createStore(rootReducer, applyMiddleware(thunk));

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

import React from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions'; // 替换为你的action文件路径

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    // 渲染组件
  }
}

const mapStateToProps = (state) => {
  return {
    data: state.data // 替换为你的状态属性
  };
};

const mapDispatchToProps = {
  fetchData // 替换为你的操作方法
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

export const fetchData = () => {
  return (dispatch) => {
    // 异步操作
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};