'dispatch' is not defined - mapDispatchToProps not passing through Router

Question

I am getting a dispatch is not defined error from 'shopfront' code.
I believe it is because i'm not passing the properties down to the next level but I'm not sure if that is correct or not.
I want to be able to pass the dispatch function through to the product.actions code correctly.

I have tried to narrow down the problem as much as possible by removing unnecessary code.
I have a user reducer that is working correctly but I don't know why this product reducer isn't

// products.reducer

const initialState = {
    products: null,
    error: null
  };

  const ProductReducer = (state = initialState, action) => {
    let newState = null;
    switch(action.type){
      case "GET_ALL_PRODUCTS": newState = {
                              ...state,
                              products: action.products
                            };
                            return newState;
      case "GET_ALL_PRODUCTS_FAIL": newState = {
                                  ...state,
                                  error: action.error
                                };
                                return newState;
      default: return state;
    }
  };

  export default ProductReducer;

// index

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import { register } from "./serviceWorker";

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";

import UserReducer from "./store/reducers/users.reducers";
import ProductReducer from "./store/reducers/products.reducer";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const appReducer = combineReducers({
    usersRed: UserReducer,
    productsRed: ProductReducer
});

const logger = (store) => {
    return next => {
        return action => {
            console.log("Middleware dispatching ");
            console.log(action);
            const result = next(action);
            console.log("Middleware next state ");
            console.log(store.getState());
            return result;
        };
    };
};
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const appStore = createStore(appReducer, composeEnhancers(applyMiddleware(logger, thunk)));

const app = (
    <BrowserRouter>
        <Provider store={appStore}>
            <App />
        </Provider>
    </BrowserRouter>
);

ReactDOM.render(app, document.getElementById("root"));
register();

// shopfront

import React, { Component } from "react";
import { Container, Row, Col, InputGroup, InputGroupAddon, Button } from "reactstrap";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { Alert } from "reactstrap";

import * as actionMethods from "../../store/actions/index.actions";
import Product from "../../components/Product/Product";

class Shopfront extends Component {

    state = {
        onAlert: false,
        internalError: null
    };

    componentDidMount() {
        this.props.loadAllProducts(5);
        console.log("component_did_mount_run")
    }

    render() {

        let ProductsList = <h1>No Products Yet!</h1>;
        if (this.props.products !== null) {
            ProductsList = this.props.products.map(Product => {
                return <Product
                    key={Product.id}
                    title={Product.name}
                    excerpt={Product.description}
                    medialink={Product.permalink}
                    ProductId={Product.id}
                />;
            });
        }

        return (
            <Container>
                {ProductsList}
            </Container>
        );
    }
};

const mapStateToProps = (state) => {
    return {
        products: state.productsRed.products,
        error: state.productsRed.error
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        loadAllProducts: (perpage) => { dispatch(actionMethods.loadAllProducts(perpage)) }
    };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Shopfront));

// index.actions

export {
    loadAllProducts
} from "./product.actions";

// product.actions

import wcapi from "../../axios-wp";

export const loadAllProducts = (perpage) => {
    wcapi.get("products", {
        per_page: perpage,
    })
        .then((response) => {
            // Successful request
            let productsRes = response.data;
            dispatch({ type: "GET_ALL_PRODUCTS", products: productsRes });
        })
        .catch((err) => {
            // Invalid request, for 4xx and 5xx statuses
            dispatch({ type: "GET_ALL_PRODUCTS_FAIL", error: err });
        })
}

Thank you for your help!

Answer 1

I have ever faced such this issue before. Then I used return dispatch => {} like this:

export const loadAllProducts = perpage => {
    return dispatch => {
        wcapi.get("products", {
            per_page: perpage,
        })
        .then((response) => {
            // Successful request
            let productsRes = response.data;
            dispatch({ type: "GET_ALL_PRODUCTS", products: productsRes });
        })
        .catch((err) => {
            // Invalid request, for 4xx and 5xx statuses
            dispatch({ type: "GET_ALL_PRODUCTS_FAIL", error: err });
        })
    }
}

Answer 2

it is because you are not returning dispatch from your loadAllProducts action

/ product.actions

import wcapi from "../../axios-wp";

export const loadAllProducts = (perpage) => (dispatch) => { //make this change
    wcapi.get("products", {
        per_page: perpage,
    })
        .then((response) => {
            // Successful request
            let productsRes = response.data;
            dispatch({ type: "GET_ALL_PRODUCTS", products: productsRes });
        })
        .catch((err) => {
            // Invalid request, for 4xx and 5xx statuses
            dispatch({ type: "GET_ALL_PRODUCTS_FAIL", error: err });
        })
}