How to fix a bug in React js?

Question

React

Hello, I am learning react js/redux
. I have an error in the console

Error: Actions must be plain objects. Use custom middleware for async actions.

actions/product.js

export { FETCH_PRODUCTS, FETCH_PRODUCTS_SUCCESS } from './types';

const ROOT_URL = 'http://localhost:8000';

export function fetchProducts(){
    return dispatch => {
        dispatch({type: FETCH_PRODUCTS});

        axios.get(`/api/products`)
                .then(response =>{
                    dispatch(fetchProductsSuccess(response));
                })
    }
}

export function fetchProductsSuccess(products){
    return {
        type: FETCH_PRODUCTS_SUCCESS,
        payload: products
    };
}

reducers/products.js

export { FETCH_PRODUCTS, FETCH_PRODUCTS_SUCCESS } from '../actions/types';

const INITIAL_STATE = {
    productsList:{products:[],error:null,loading:false},
    newProduct:{post:null,error:null,loading:false},
    deletedProduct:{post:null,error:null,loading:false},
    editProduct:{post:null,error:null,loading:false},
    activeProduct:{post:null,error:null,loading:false},
    updateProduct:{post:null,error:null,loading:false},
};


export default function (state = INITIAL_STATE,action){
    switch (action.type) {
        case 'FETCH_PRODUCTS':
            return { ...state, productsList:{products:[],error:null,loading:true}};
        case 'FETCH_PRODUCTS_SUCCESS':
            return { ...state, productsList:{products:action.payload.data,error:null,loading:false}};
        default:
            return state;
    }
}

reducers/cart.js

const INITIAL_STATE = {

};


export default function (state = {INITIAL_STATE},action){
    switch (action.type) {
        case 'FETCH_CART':
            return { ...state, productsList:{products:[],error:null,loading:true}};
        case 'FETCH_CART_SUCCESS':
            return { ...state, productsList:{products:action.payload.data,error:null,loading:false}};
        default:
            return state;
    }
}

reducers/index.js

import { combineReducers } from 'redux';
import productsReducer from './products';
import cartReducer from './cart';

export default combineReducers({
    products: productsReducer,
    cart: cartReducer,
});

store.js

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';

import rootReducer from './reducers';

const store = createStore( rootReducer, applyMiddleware( logger ) );

export default store;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render((
    <Provider store={store}>
        <Router>
            <Route path="/" component={Main} />
        </Router>
    </Provider>
), document.getElementById('root'));

components/Recommended.jsx

import React, {Component} from 'react';
import ProductSingle from '../components/products/ProductSingle';
import recomendedProducts from './database/recomended-products-data';
import Slider from 'react-slick';

import * as productsActions from './../actions/products';

console.log( productsActions );

import { connect } from 'react-redux';

class Recommended extends Component {

    state = {
        products: recomendedProducts,
    }

    componentWillMount(){
        console.log( this.props.fetchProducts() );
    }

    render(){

        //const {products} = this.props.productsList;

        return (
            <div className="recommended">
                <div className="container recommendedTitle__container">
                    <div className="row recommendedTitle__row">
                        <div className="col-xs-12 recommendedTitle__col">
                            <div className="recommendedTitle__inner">
                                <h3 className="recommended__title home__sectionTitle home__sectionTitleAfter">
                                    Мы рекомендуем </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="container recommended__container">
                    <div className="row recommended__row">
                        <div className="recommended__col col-xs-12">
                            <div className="recommended__inner">
                                <div className="recommended__cats">
                                    <ul className="recommended__categoryList">
                                        <li className="recommended__categoryItem">
                                            <a href="/" className="recommended__categoryItemLink">Хит продаж</a>
                                        </li>
                                    </ul>
                                </div>

                                <div className="recommended__products">
                                    <div className="recommended__categoryWrapper">
                                        <Slider {...settings}>
                                        {
                                            this.state.products.map( ( productData ) => (
                                                <ProductSingle key={productData.id} {...productData} />
                                            ))
                                        }
                                        </Slider>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="container recommended__container">
                    <div className="row recommended__row">
                        <div className="recommended__col col-xs-12">
                            <div className="recommended__btnWrap rayBtn__wrap">
                                <a href="/shop" className="reccomended__btnLink homepage__rayBtn">Просмотреть все товары</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const settings = {
    slidesToScroll: 1,
    dots: false,
    arrows: true,
    prevArrow: <SamplePrevArrow/>,
    nextArrow: <SampleNextArrow/>,
    centerMode: true,
    focusOnSelect: false,
    autoplay: false,
    centerPadding: 0,
    swipe: false,
    responsive: [
        {
            breakpoint: 2400,
            settings: {
                slidesToShow: 4,
            }
        },
        {
            breakpoint: 1199,
            settings: {
                slidesToShow: 3,
            }
        },
        {
            breakpoint: 991,
            settings: {
                slidesToShow: 2,
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 1,
            }
        },
    ],
};

function SampleNextArrow(props) {
    const { style, onClick } = props;
    return (
        <div type="button"
             data-role="none"
             className="slick-next slick-arrow"
             aria-label="Next"
             role="button"
             onClick={onClick}
             style={{ ...style, display: "block" }}
        />
    );
}

function SamplePrevArrow(props) {
    const { style, onClick } = props;
    return (
        <div type="button"
             data-role="none"
             className="slick-prev slick-arrow"
             aria-label="Previous"
             role="button"
             onClick={onClick}
             style={{ ...style, display: "block" }}
        />
    );
}

function mapStateToProps(state) {
    return {
        productsList:state.products.productsList,
    }
}
export default connect(mapStateToProps, productsActions)(Recommended);

Where is the mistake?
Thank you.