代码之家  ›  专栏  ›  技术社区  ›  zloctb

错误:redux thunk this。道具。调度不起作用[重复]

  •  0
  • zloctb  · 技术社区  · 8 年前

    当我点击按钮时,我出错了

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

    请帮帮我

    1 回复  |  直到 8 年前
        1
  •  1
  •   Kalob Porter    8 年前
    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()) 在您的组件中