CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Renaud Monell
Renaud Monell

Reputation: 135

React Redux doesnt dispatch action

I recently try to implement redux in my react app.

I have a container called SignIn who instantiate a mapDispatchToProps and connect him to the component. SignIn render a component called SignInForm (code below).

In this component, we call an action witch update a redux state by calling an action nammed "SignInUser" witch update him from the value "false" to "true"

the problem is that when I'm trying to call the this.props.action on my script, this just return that object

Here is the SignIn component code :

const mapDispatchToProps = dispatch => {
    return { 
        signInUser: () => {
            dispatch(signInUser())
        }
    }
}

function SignIn() {
    return (
        <div className="skr-flex column between-v centered-h stretched">
            <div className="col-retracted stretched-h p-m skr-flex row between-h centered-v">
                <Logo />
            </div>
            <SignInForm signInUser={signInUser} />
        </div>
    )
}

export default connect(null, mapDispatchToProps)(SignIn)

And here just the part where the dispatch is supposed to opperer

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
}

handleClick(event) {
    this.props.signInUser()
}

However I have absolutely no errors, all the rest of my code seems to work properly

I have an idea on why it doesn't work but I'm a pure beginner on redux (and stackoverflow by the way) and just need some help to clarrify my thought

I hope I've been pretty clear about my problem

Thank's in advance guys !

Upvotes: 1

Views: 97

Answers (2)

Rishi Jodha
Rishi Jodha

Reputation: 186

signInUser action will be provided to your component as a prop. Hence, You need to access it from props. 

const SignIn = (props) => {
return (
    <div className="skr-flex column between-v centered-h stretched">
        <div className="col-retracted stretched-h p-m skr-flex row between-h centered-v">
            <Logo />
        </div>
        <SignInForm signInUser={props.signInUser} />
    </div>
)
}

export default connect(null, mapDispatchToProps)(SignIn)

Upvotes: 1

Gilad Tamam
Gilad Tamam

Reputation: 306

you should call props.signInUser, props is your component argument

function SignIn(props) {
    return (
        <div className="skr-flex column between-v centered-h stretched">
            <div className="col-retracted stretched-h p-m skr-flex row between-h centered-v">
                <Logo />
            </div>
            <SignInForm signInUser={props.signInUser} />
        </div>
    )
}

Upvotes: 1

Related Questions