Javascript Redux thunk分派函数不'；我不在拉威尔工作

我正在使用React Laravel进行我的项目。 问题是当我尝试使用redux thunk作为异步分派函数时。 我的分派功能无法执行。 请帮我解决这个问题

我已经尝试过使用promise或redux开发工具扩展库

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（reducer）

Marketplace.js（jsx视图）

import React，{Component}来自'React'；
从'react redux'导入{connect}；
将*作为操作从“../../../store/actions”导入；
类扩展组件{
componentDidMount（）{
console.log（“[ComponentDidMount]Marketplace”）
this.props.showmetplace（）；
}
render（）{
返回(
市场
);        
}
}
const mapDispatchToProps=调度=>{
返回{
showMarketplace:（）=>调度（actions.showMarketplace）
};
}
导出默认连接（空，mapDispatchToProps）（市场）；

这是my console.log的结果（第一次为

Marketplace.js

加载时）

请帮帮我，我已经挣扎了2个多小时，只是因为这个问题。（这是我第一次使用React Laravel）。

---

谢谢。

编辑：我想这是因为thunk没有正确添加到redux中

首先，尝试只添加thunk

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

---

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

我已经发现了问题。这不是问题。 这实际上是我们在任何地方发现的

正常Redux

问题

Marketplace.js（jsx视图）

import React，{Component}来自'React'；
从'react redux'导入{connect}；
将*作为操作从“../../../store/actions”导入；
类扩展组件{
componentDidMount（）{
console.log（“[ComponentDidMount]Marketplace”）
this.props.showmetplace（）；
}
render（）{
返回(
市场
);        
}
}
const mapDispatchToProps=调度=>{
返回{
showMarketplace:（）=>dispatch（actions.showMarketplace）//这就是问题所在，它没有正确执行。应该删除这个
showMarketplace:（）=>dispatch（actions.showMarketplace（））//应该是这样的。
};
}
导出默认连接（空，mapDispatchToProps）（市场）；

实际上，我想查看我的

响应

变量，所以我就这样离开它，但我甚至无法获取“Load Marketplace”console.log。（此项仅适用于加载运动）。您可以看到我的console.log图像，我只获得了Show Marketplace操作日志。我已经发现了问题，对于redux用户来说，这是一个初学者的错误。顺便说一句，谢谢你的帮助！出了什么问题？我没有注意到。

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;

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

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

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