javascript - 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;
}
};```
解决方案
推荐阅读
- sql - 寻找解决方案时间戳postgresql
- javascript - 如何在超时函数中获取更新的 useState() 值?
- javascript - 在 Vuetify 中,如何防止选中的 v-checkbox 被取消选中?
- node.js - nockBack 无法记录任何固定装置
- html - 有没有办法重用 CSS 样式但具有不同的背景图像?
- linux - 如何部署共享库?
- typescript - 如何在打字稿中编写以 lambdas 作为参数的方法
- powerbi - PowerBI 测量错误地计算平均值 - 为什么?
- javascript - 如何将项目添加到对象JS
- unit-testing - 无法在模块外使用导入语句 - Vuex 测试类星体