react-redux，安装了 thunk 中间件，类组件 - 错误“动作必须是普通对象。相反，实际类型是：'Promise'”调度

Question

mern 堆栈，使用我调用的类组件 Landing 我使用 componentDidMount 方法。 在表单提交 axios 上使用 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'),
);

登陆.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);

在我的操作目录中： 拍卖.js

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

减速器 出价.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 中的 async 即可

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