Как решить: Ошибка: Действия должны быть простыми объектами.Использовать пользовательское промежуточное ПО для асинхронных действий

Question

Я использую 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
    }
}

В чем здесь проблема, спасибо?

Answer 1

Попробуйте это:

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

Вам необходимо поместить возвращаемый объект в скобки.Если вы этого не сделаете, то вы обязательно получите эту ошибку.

Надеюсь, это поможет!