Redux-thunk dispatch function doesn't work on Laravel

Question

I'm using React-Laravel for my project. The problem is when I tried to use redux-thunk for the asynchronous dispatch function. My dispatch function won't get executed. Please do help me figure out this problem.

I have already tried to use promise or redux-devtools-extension library https://codeburst.io/reactjs-app-with-laravel-restful-api-endpoint-part-2-aef12fe6db02

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import Layout from './jsx/Layout/Layout';
import marketplaceReducer from './store/reducers/marketplace';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const appReducer = combineReducers({
    marketplace: marketplaceReducer
});

const rootReducer = (state, action) => {
    return appReducer(state, action);
}

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

const render = (
    <Provider store={store}>
        <BrowserRouter>
            <Layout />
        </BrowserRouter>
    </Provider>
);

ReactDOM.render(render, document.getElementById('root'));

marketplace.js (action)

import * as actionTypes from './actionTypes';
import axios from '../../axios';

export const loadMarketplace = () => {
    console.log("Load Marketplace");
    return {
        type: actionTypes.LOAD_MARKETPLACE
    };
}

export const successMarketplace = (data) => {
    console.log("Success Marketplace");
    return {
        type: actionTypes.SUCCESS_MARKETPLACE,
        data: data
    }
}

export const failedMarketplace = () => {
    console.log("Failed Marketplace");
    return {
        type: actionTypes.FAILED_MARKETPLACE
    }
}

export const showMarketplace = () => {
    console.log("Show Marketplace Action")
    return dispatch => {
        //This is the problem
        //Inside this function, I can't see any console.log, even loadMarketplace() didn't get called.
        console.log("Show Marketplace in dispatch");
        dispatch(loadMarketplace());
        axios.get('/marketplaces')
            .then(response => {
                dispatch(successMarketplace(response));
            })
            .catch(error => {
                dispatch(failedMarketplace());
            });
    };
}

marketplace.js (reducer)

import * as actionTypes from '../actions/actionTypes';

const initial_state = {
    data: [],
    loading: false
}

const loadMarketplace = (state, action) => {
    console.log("Load Marketplace Reducer")
    return {
        ...state,
        loading: true
    };
}
const successMarketplace = (state, action) => {
    console.log("Success Marketplace Reducer", action.data)
    return {
        ...state,
        loading: false,
        data: action.data
    };
}

const failedMarketplace = (state, action) => {
    return {
        ...state,
        loading: false
    };
}

const reducer = (state = initial_state, action) => {
    //This is called when the first init, never got it through showMarketplace() function.
    console.log("Marketplace Reducer", action);
    switch (action.type) {
        case actionTypes.LOAD_MARKETPLACE: return loadMarketplace(state, action);
        case actionTypes.SUCCESS_MARKETPLACE: return successMarketplace(state, action);
        case actionTypes.FAILED_MARKETPLACE: return failedMarketplace(state, action);
        default: return state;
    }
}

export default reducer;

Marketplace.js (jsx view)

import React, { Component } from 'react';
import { connect } from 'react-redux';

import * as actions from '../../../store/actions';

class Marketplace extends Component {
    componentDidMount() {
        console.log('[ComponentDidMount] Marketplace')
        this.props.showMarketplace();
    }

    render() {
        return (
            <React.Fragment>
                Marketplace
            </React.Fragment>
        );        
    }
}

const mapDispatchToProps = dispatch => {
    return {
        showMarketplace: () => dispatch(actions.showMarketplace)
    };
}


export default connect(null, mapDispatchToProps)(Marketplace);

This is the result of my console.log (when loading the first time for Marketplace.js)

Please do help, I've been struggling for 2 hours or more, only because of this problem. (This is my first time using React-Laravel). Thank you.

Answer 1

I already found the problem. It is not redux-thunk problem. It is actually a normal Redux problem we found anywhere.

Marketplace.js (jsx view)

import React, { Component } from 'react';
import { connect } from 'react-redux';

import * as actions from '../../../store/actions';

class Marketplace extends Component {
    componentDidMount() {
        console.log('[ComponentDidMount] Marketplace')
        this.props.showMarketplace();
    }

    render() {
        return (
            <React.Fragment>
                Marketplace
            </React.Fragment>
        );        
    }
}

const mapDispatchToProps = dispatch => {
    return {
        showMarketplace: () => dispatch(actions.showMarketplace) //THIS IS THE PROBLEM, IT IS NOT EXECUTING PROPERLY. THIS ONE SHOULD BE
        showMarketplace: () => dispatch(actions.showMarketplace()) //SHOULD BE LIKE THIS.
    };
}


export default connect(null, mapDispatchToProps)(Marketplace);

Answer 2

Edited: I think it is something about thunk is not added right to redux.

First of all try to add only thunk.

const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(thunk)
));

If it works, maybe try to change the order of them.