错误：redux

错误：redux-thunk this.props.dispatch不是函数[重复](Error :redux-thunk this.props.dispatch is not function [duplicate])

这个问题在这里已经有了答案：

如何将多个actionCreators包装成一个道具？ 3个答案

当我点击按钮时，我得到了错误

未捕获的TypeError：_this2.props.dispatch不是函数

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

请帮帮我

This question already has an answer here:

How to wrap multi actionCreators into one props? 3 answers

When I clicked into button I got Error

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

Help me please

最满意答案

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

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

should be

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

Then you can just call this.props.logout() instead dispatch(logout()) in your component