Error :redux-thunk this.props.dispatch is not function

Question

当我点击按钮时出现错误

Uncaught TypeError: _this2.props.dispatch is not a function

    const reducers = combineReducers({
        geod:reducer 
    });


    function configureStore(initialState = {}) {
        const store = createStore(
            reducers,
            initialState,
            applyMiddleware(thunk)

        )
        return store;
    };



    var ping = function ping(store) {
        return function (next) {
            return function (action) {

    //EX1
    /*
                if(action.type !== 'ACTIVATE_GEOD') return next(action)
                console.log(`Тип события: ${action.type},  события: ${action}`)
                return next(action);
    */



    //EX2

                console.log(`Тип события: ${action.type},  события: ${action}`)
                return next(action);

            };
        };
    };



    window.store = configureStore();

    store.subscribe(() => console.log(store.getState()))




    function logout(){
        return function(dispatch){
            setTimeout(function(){
                activateGeod({title:'6 sec'})
            },6000)
        }
    }

    // App.js
    class App extends React.Component {

        render() {

            return (
                <div>
                    PAGE:

                    <h1>{this.props.geod.title || 'Hello World!'}</h1>

                    {this.props.geod.title ?
                        <button onClick={this.props.closeGeod}>
                            Exit Geod
                        </button> :
                        <button onClick={() =>
 this.props.activateGeod({ title: 'I am a geo dude!' })}>
                            Click Me!
                        </button>
                    }

                    <button onClick={() => this.props.dispatch(  logout() ) }>
                        THUNK  REDUX   Click Me!
                    </button>

                </div>
            );
        }

    }

    // AppContainer.js
    const mapStateToProps = (state, ownProps) => ({
        geod: state.geod
    });

    /*
    const mapDispatchToProps =  {
        activateGeod,
        closeGeod,
    };
    */


    const mapDispatchToProps =  (dispatch) => {

        return {
            activateGeod: bindActionCreators(activateGeod, dispatch),
            closeGeod: bindActionCreators(closeGeod, dispatch),
        }
    };


    const AppContainer = connect(
        mapStateToProps,
        mapDispatchToProps
    )(App);


    ReactDom.render(

        <Provider store={store}>
            <AppContainer />
        </Provider>,
        document.getElementById('wrapper')
    );

请帮帮我

Answer 1

const mapDispatchToProps =  (dispatch) => {
    return {
        activateGeod: bindActionCreators(activateGeod, dispatch),
        closeGeod: bindActionCreators(closeGeod, dispatch),
    }
};

应该是

const mapDispatchToProps =  (dispatch) => ({
  activateGeod: bindActionCreators(activateGeod, dispatch),
  closeGeod: bindActionCreators(closeGeod, dispatch),
  logout: () => dispatch(logout()),
});

然后你可以在你的组件中调用 this.props.logout() 而不是 dispatch(logout())

Error :redux-thunk this.props.dispatch is not function

Error :redux-thunk this.props.dispatch is not function

reactjs

redux

redux-thunk