Function gets not executed in Hook

Question

I have a component where I want to dispatch a Redux action through a function. What I do not understand is, the function is not executed. A console.log() right before and after the functioncall bar() gets logged, but when I try to console.log() from the function bar(), that has no effect what so ever... Why is that?

// Foo.js
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import React from 'react';
import { bar } from './actions';

const Foo = () => {
    useEffect(() => {
    console.log('I get logged');
        bar();
    console.log('I get logged too');
    }, [])

    return <Whatever> ... </Whatever>
};


const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        bar,
    }, dispatch)
};

const mapStateToProps = state => {
    const { ... } = state
    return {
        ...: ...
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Foo);




// actions.js
export const bar = () => async dispatch => {
    console.log('I do not get logged');
    await ... 
    dispatch({ type: ..., ... });
};

phry · Accepted Answer · 2021-03-17 14:40:11Z

1

Because bar at this point references your unbound action creator, not the one from connect. You would have to use props.bar to get that. But you should not.

Generally, you should not use connect with function components, but the useDispatch and useSelector react-redux hooks instead.

So it should look like

const Foo = () => {
    const dispatch = useDispatch();
    useEffect(() => {
    console.log('I get logged');
        dispatch(bar());
    console.log('I get logged too');
    }, [dispatch])

    return <Whatever> ... </Whatever>
};

without any use of connect anywhere.

answered Mar 17, 2021 at 14:40

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function gets not executed in Hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related