Как исправить: «TypeError: fetchProducts не является функцией»

Question

Я пытаюсь получить набор продуктов из API, используя хранилище редуксов.

Для этого я создал действия и редукторы, функцию mapStateToProps() и функцию mapDispatchToProps(), последнийодна содержит функцию fetchProducts(), которая определена в файле действий и должна вызывать список продуктов при вызове.

Все это делается следующим образом:

Это компонент обзора, который должен отображать данные (фактическое отображение не учитывается, поскольку оно не влияет на этот вопрос):

import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types'
import fetchProductsAction from '../actions/ProductFetchingActionFile'
import {bindActionCreators} from 'redux';

export class Overview extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.props.fetchProducts();
    }

    render() {
        return(
                  <h1>test</h1>
        )
    }
}

const mapStateToProps = state => ({
    error: state.rootReducer.productsReducer.error,
    products: state.rootReducer.productsReducer.products,
    pending: state.rootReducer.productsReducer.pending,
})

const mapDispatchToProps = dispatch => bindActionCreators({
    fetchProducts: fetchProductsAction 
}, dispatch)

Overview.propTypes = {
    fetchProducts: PropTypes.func
}

export default connect(mapStateToProps, mapDispatchToProps)(Overview);

Это файл действия (ProductFetchingActionFile):

import {
    PREFIX,
    FETCH_PRODUCTS_PENDING,
    FETCH_PRODUCTS_SUCCESS,
    FETCH_PRODUCTS_ERROR
} from "./types";

function fetchProductsPending() {
    return{
        type: FETCH_PRODUCTS_PENDING
    }
}

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

function fetchProductsError(error) {
    return{
        type: FETCH_PRODUCTS_ERROR,
        error: error
    }
}

function fetchProducts() {
    return dispatch => {
        dispatch(fetchProductsPending());
        return fetch(`localhost:8080/products`)
            .then(res => res.json())
            .then(res => {
                if(res.error) {
                    throw(res.error);
                }
                dispatch(fetchProductsSuccess(res));
                return res
            })
            .catch(error => {
                dispatch(fetchProductsError(error));
            })
    }
}

export default fetchProducts

Это файл редуктора:

import {
    FETCH_PRODUCTS_PENDING,
    FETCH_PRODUCTS_SUCCESS,
    FETCH_PRODUCTS_ERROR
} from "./types"


const initialState = {
    pending: false,
    products: [],
    error: null
}

export function productsReducer(state = initialState, action) {
    switch(action.type) {
    case FETCH_PRODUCTS_PENDING:
        return {
            ...state,
            pending: true
        }
    case FETCH_PRODUCTS_SUCCESS:
        return {
            ...state,
            pending: false,
            products: action.products
        }
    case FETCH_PRODUCTS_ERROR:
        return {
            ...state,
            pending: false,
            error: action.error
        }
    default:
        return state;
    }
}

Теперь я получаю следующую ошибку, когдаЗагружен компонент Overview: TypeError: fetchProducts is not a function.Эта ошибка срабатывает при вызове fetchProducts в функции componentDidMount().

Кроме того, когда Overview.props печатается в консоли перед этим вызовом, он не содержит функцию fetchProducts, поэтомуЯ подозреваю, что он должен что-то делать с mapDispatchToProps, но я не могу найти проблему.

Редактировать: хорошо отметить, что если импортированный fetchProductsAction печатается в конструкторе Overview компонент, он показывает правильную функцию.Однако это не заканчивается в props из Overview, поэтому я ожидаю, что проблема будет там.

Answer 1

Вы импортируете свое действие как

import fetchProductsAction from '../actions/ProductFetchingActionFile'

когда это выглядит так, как будто оно не экспортируется по умолчанию.

Вероятно, должно быть:

import { fetchProductsAction } from '../actions/ProductFetchingActionFile'

Answer 2

попробуйте

   const mapDispatchToProps = dispatch => {
       fetchProducts : () => {
            dispatch(fethcProducts())
         }
   }