reactjs - 未処理の拒否 (TypeError): this.props.dispatch(...).then は関数ではありません

Question

redux-thunk と redux-promise を一緒に使用していますが、どういうわけか redux-thunk ミドルウェアが呼び出されず、エラーが発生します。

これが私のセットアップです

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension';
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import promiseMiddleware from 'redux-promise';

import {ThemeProvider} from "@material-ui/core/styles"
import theme from "./components/ui/Theme"
import reducers from './reducers/index'
import './index.css';
import App from './App';

const middleware =[thunk, promiseMiddleware]

const store = createStore(
  reducers,
  composeWithDevTools(applyMiddleware(...middleware))
)



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

これが私のアクションクリエイターです

export const authUser =  () => { 

    const res = axios.get("http://localhost:3002/api/users/auth", {withCredentials: true})
      
    return {type: AUTH_USER, payload: res.data}
}

これは、別のコンポーネントをレンダリングする高次 AUTH コンポーネントであり、ルートを変更したい結果に基づいて、ComponentDidMount でアクションをディスパッチした後です。

import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'

import CircularProgress from '@material-ui/core/CircularProgress';
import {authUser} from '../actions/user'


export default function(WrappedComponent, isRestricted){
    class Auth extends React.Component {

    state = {
        loading: true
    }
    
        componentDidMount() {
        
        this.props.dispatch(authUser()).then(() => {
            this.setState({loading: false})
            
            // if(!this.props.user.isAuth && isRestricted) {
            //     this.props.history.push('/joinus')
            // }
            // else if (this.props.user.isAuth && isRestricted === null) {
            //     this.props.history.push('/')
            // }
        }) 
    }

    render() {

        if(this.state.loading) {
        
            return (
                <CircularProgress />
            )
        }


        return (
            <div>
                <WrappedComponent  {...this.props} />
            </div>
        )
    }  
        
    }

    function mapStateToProps (state) {
        return {
            user: state.user.userData
        }
    }
    
    return  connect(mapStateToProps)(withRouter(Auth))
}

最後に、これは私が得るエラーです。

https://imgur.com/a/nTnv9khまたはhttps://prnt.sc/tkcs0m

(未処理の拒否 (TypeError): this.props.dispatch(…).then は関数ではありません)

ComponentDidMount で .then() を使用しないと、未定義になります。また、.then() を追加して AXIOS リクエスト内でディスパッチすると、これは別のエラーになります。

(エラー: アクションはプレーン オブジェクトである必要があります。非同期アクションにはカスタム ミドルウェアを使用してください。) https://imgur.com/a/czlvHBjまたはhttps://prnt.sc/tkcsqy