如何解决：错误：操作必须是普通对象。使用自定义中间件进行异步操作

Posted 2021-04-18

我正在使用redux-thunk/ReactJs进行异步操作，我收到的错误就像这个Error: Actions must be plain objects. Use custom middleware for async actions.

但我已经安装了redux-thunk并在index.js文件中配置了它

这是我的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import myReducer from './reducers/index';
const store = createStore(
    myReducer,
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
registerServiceWorker();

这是我的'action.js'文件：

import * as types from './../constants/ActionTypes';
import callApi from '../utils/callApi';

export const actFetchProductsRequest = () => {
    return dispatch => {
        return callApi('products', 'GET', null).then(res => {
            dispatch(actFetchProducts(res.data))
        }).catch(err => console.log(err))
    }
}

export const actFetchProducts = (products) => {
    return {
        type: types.LIST_ALL,
        products
    }
}

这有什么问题，谢谢？

答案

试试这个：

export const actFetchProducts = (products) => {
    return ({
        type: types.LIST_ALL,
        products
    })
}

您需要将返回对象放在括号中。如果你不这样做，那你肯定会得到这个错误。

希望，这有帮助！