1

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)

enter image description here

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.

2 Answers 2

2

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);
Sign up to request clarification or add additional context in comments.

Comments

0

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.

3 Comments

Actually, I want to see my response variable, so I just leave it like that, but I can't even get the "Load Marketplace" console.log. (This one is only applying loading motion). You can see my console.log image, I only got the Show Marketplace Action log. And after that the Logger for the function.
I already found the problem, It was a beginner mistake for redux users. Btw thanks for the help !
What was the problem? I did not notice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.