Cannot call redux action in my component

Question

I'm learning redux with react-native and I'm trying to use actions in "container-component" pattern.

I want to call a redux action in my component and I'm using mapDispatchToProps in order to do this.

But when the component calls the action, I get the famous red screen with

this.props.myDecrementor is not a function

and when I debug and console.log(this.props) in my component no actions or props are available.

Let me show my code :

myContainer.js

import { connect } from "react-redux";
import { incrementStepCount, decrementStepCount } from "../actions";

class ChooseHour extends Component {
    constructor(props) {
        super(props);
        this.addStep = this.addStep.bind(this);
        this.removeStep = this.removeStep.bind(this);
    }

    addStep() {
        this.props.myIncrementor();
    }

    removeStep() {
        this.props.myDecrementor();
    }


    render() {
        return ( <
            View style = {
                {
                    flex: 1
                }
            } >
            <
            Button onPress = {
                this.addStep
            }
            style = {
                styles.btnAddEtape
            }
            small transparent iconLeft >
            <
            Text > Add Step < /Text> <
            /Button>            <
            InputStep key = {
                1
            }
            label = "MyStep" / >
            <
            /View>
        );
    }
}

function mapStateToProps(state) {
    return {
        order: state.order
    };
}

function mapDispatchToProps(dispatch) {
    return {
        myDecrementor: () => dispatch(decrementStepCount()),
        myIncrementor: () => dispatch(incrementStepCount())
    };
}

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

myComponent.js

export default class InputStep extends Component {
    decrementStepCountinComponent() {
        this.props.myDecrementor();
    }
    render() {
        return ( < Item style = {
                styles.inputContainer
            }
            inlineLabel > < Label > {
                this.props.label
            } < /Label> <
            Input style = {
                styles.input
            }
            placeholder = "Step" / > < Icon name = "times"
            type = "FontAwesome"
            style = {
                {
                    color: "red"
                }
            }
            onPress = {
                () => this.decrementStepCountinComponent()
            }
            /> < /
            Item > );
    }
}

Calling actions in container works, but not in the component ... I've read this post What is mapDispatchToProps? but I really don't understand why it is not working.

Thank you in advance for your help.

Answer 1

You need to pass myDecrement() function to inputstep component from container as props.

In myContainer add

<InputStep myDecrementor = {this.props.myDecrementor}