首页 > 解决方案 > React Unhandled Rejection (Error):动作必须是普通对象。相反,实际的类型是:'Promise'

问题描述

我遇到了这个错误,作为以前和 redux 一起使用过 react 的人,我知道我需要在这里返回一个普通的 Javascript 对象而不是 Promise,但即使在设置我的 async 和 await 调用时,我仍然得到这个错误。我以前设置过 redux,但自从我看过它以来已经有一段时间了,所以我可能在这里遗漏了一些东西,但我不知道是什么。如果有人可以帮助我,那将非常感谢。:

索引.js

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import './index.css'
import reportWebVitals from './reportWebVitals';
import { AppRouter } from './router/AppRouter';

const store = configureStore();


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

reportWebVitals();

店铺

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import dashboardRedeucer from '../redux/dashboard';
import authReducer from '../redux/auth'
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default () => {
    //store creation
    const store = createStore(combineReducers(
        { 
            dsashboard: dashboardRedeucer,
            auth: authReducer 
        }),
        composeEnhancers(applyMiddleware(thunk))
    );

    return store;
};

登录

import Axios from 'axios'
import {connect} from 'react-redux';
import { useState } from 'react';
import { startLogin, login } from '../../../actions/auth';

const UserLogin = ({startLogin, finishLogin}) => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const handleSubmit = async () => {
        const result = await startLogin(email, password);
        console.log(result)


        // finishLogin(statusCode)
    }
}

const mapDispatchToProps = (dispatch) => ({
    startLogin: (email, password) => dispatch(startLogin(email, password)),
    finishLogin: (status) => dispatch(login(status)),
});

export default connect(undefined, mapDispatchToProps)(UserLogin);```

**Action**
```import Axios from 'axios';

export const login = (status) =>({
    type: 'LOGIN',
    status
});


export const startLogin = async (email, password) => {    
  return await Axios.post('api call', {
        email,
        password,
    }).then((response) => {
        return response;
    });
}```

**Reducer**
```/* eslint-disable import/no-anonymous-default-export */
export default (state = {}, action) => {
    switch(action.type){
        case 'LOGIN':
            
            return{
                loggedIn: true,
                status: action.status,
        };
        case 'LOGOUT':
            return {
                loggedIn: false
            };
        default:
            return state;
    }
};```

标签: javascriptreactjsreduxreact-redux

解决方案


推荐阅读