0

我正在一起使用 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

4

2 回答 2

0

问题1：问题出在您的axios调用中。在此处输入链接描述阅读文档。axios get 返回一个承诺。use 可以使用 try catch 或 async await。

问题2：

const authData = useSelector(state => state.user)
const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
   if(authData.isAuth) {
      setIsLoading(false)
   }

}, [authData]);

if(isLoading) return <p>loading...</p>

// your rest of code
于 2020-07-18T20:48:00.680 回答
0

在将 async await 添加到 axios 调用之后它起作用了（我认为它应该由中间件处理）但现在我的 Header 组件中出现另一个错误

    useEffect(() => {
        
        props.dispatch(actions.authUser()).then(() => {
            console.log(props, actions)
            if(props.user.isAuth) setToggleLogOut(true)
        })

        window.addEventListener('scroll', ()=> {
            window.scrollY > 0 ? setToggleHeader(true) : setToggleHeader(false)
        });
    }, [props.value])

    const handleLogOut = () => {
        props.logOutUser(() => {
            setToggleLogOut(false)
        })
    }


.
.
.
.
.
.
.
.


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

export default connect(mapStateToProps)(Header)

（未处理的拒绝（TypeError）：无法读取未定义的属性“isAuth”） https://prnt.sc/tkd0bj

于 2020-07-18T20:22:26.803 回答