Redux-thunk 调度功能在 Laravel 上不起作用

Question

我正在为我的项目使用 React-Laravel。问题是当我尝试将 redux-thunk 用于异步调度功能时。我的调度函数不会被执行。请帮我解决这个问题。

我已经尝试过使用 promise 或 redux-devtools-extension 库 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（动作）

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(减速机)

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 视图）

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);

这是我 console.log 的结果（第一次为 Marketplace.js 加载时）

请帮忙，我已经挣扎了 2 个小时或更长时间，只是因为这个问题。（这是我第一次使用 React-Laravel）。谢谢。

Answer 1

已编辑：我认为是关于 thunk 的问题没有正确添加到 redux。

首先尝试只添加thunk。

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

如果可行，也许可以尝试更改它们的顺序。

Answer 2

我已经找到问题了。这不是 redux-thunk 问题。这实际上是我们在任何地方发现的一个 normal Redux 问题。

Marketplace.js（jsx 视图）

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);

Redux-thunk 调度功能在 Laravel 上不起作用

Redux-thunk dispatch function doesn't work on Laravel

javascript

reactjs

redux

redux-thunk

react-laravel