react-redux，已安装 thunk 中间件，class 组件 - 错误 "Actions must be plain objects. Instead, the actual type was: 'Promise'" 调度

Question

mern 堆栈，使用 class 组件我调用 Landing 我使用 componentDidMount 方法。在表单上提交 axios 正在使用 return 我的用户对象的 get 方法。然后我将我的用户对象分散到我的商店中。收到此错误：动作必须是普通对象。相反，实际类型是：'Promise'。您可能需要将中间件添加到商店设置中以处理调度其他值，例如 'redux-thunk' 以处理调度功能。我通过执行连接并传递我导出的操作然后执行 Landing 来默认导出 Landing 组件。 index.js 文件当前正在使用 redux-thunk 中间件。

我的目标是更新用户状态，以便所有组件立即显示表单提交中正在更改的内容。

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import { reducers } from './reducers';
import App from './components/App';


const store = createStore(reducers, {}, compose(applyMiddleware(thunk)));

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

Landing.js

import React from 'react';
import { io } from 'socket.io-client';
import _ from 'underscore';
import { connect } from 'react-redux'

import './styles.css';
import { bid } from '../../actions/auction';
import { bidPlaced, loggedUser } from '../../api/index'; 
import { CONNECTION_PORT } from '../../config';




class Landing extends React.Component {

constructor(props) {
        super(props);
        this.state = {
             user: ''
        }
        componentDidMount() {
             this.setState({user: JSON.parse(localStorage.getItem('profile))}) //sets the logged in user to state 
        }
        handleFormSubmit = async (e) => { //This function is wrapped in tryCatch in my app
             e.preventDefault()
             //Storing user data in an object
             const userData = {email: this.state.user.result.email, id: this.state.user.result._id}
             const response = await loggedUser(userData)
             //which returns a promise, which does currently hold the updated userModel
             this.props.bid(response)
        }
        render (
             <div>
               <form onSubmit={handleFormSubmit}>
                     <input value={'all the user information'}>
                     <button type="submit">Click Me</button> 
               <form/>
        )
}

export default connect(null, { bid })(Landing);

在我的操作目录中： auction.js

export const bid = async (user) => ({
    type: EDIT,
    data: user
});

减速器 bid.js

import * as actionType from '../constants/actionTypes';
let payload = null
if (localStorage.getItem('profile')) payload = localStorage.getItem('profile')

const bidReducer = (state = { authData: payload }, action) => {
    switch (action.type) {
        case actionType.EDIT:
            
            localStorage.setItem('profile', JSON.stringify({ ...action?.data }));

            return { ...state, authData: action.data, loading: false, errors: null };

        default:
            return state;
    }
};

export default bidReducer;

Answer 1

只需删除 bid

中的异步

export const bid = (user) => ({
    type: EDIT,
    data: user
});

react-redux，已安装 thunk 中间件，class 组件 - 错误 "Actions must be plain objects. Instead, the actual type was: 'Promise'" 调度

react-redux, thunk middleware installed, class component - error "Actions must be plain objects. Instead, the actual type was: 'Promise'" dispatch

reactjs

redux-thunk

react-redux