CODEWITHSUNDEEP
reactjsredux
user3348410
user3348410

Reputation: 2833

React Redux How pass to action payload target value

i wonder how pass action payload my input value?

In my component i have email input eg. 

<input type="email" value={this.state.email} onChange={this.handleChange}/>
 <input type="password" value={this.state.password} onChange={this.password}/>

i have a state in my component: 

state = {
        email: '',
        password: ''
    };

and i get value with onChange method: 

handleChange = (e) => {
        this.setState({email: e.target.value});
    }
 password = (e) => {
        this.setState({password: e.target.value})
    }

on submit form i have to run some function and here i'm dispatching my action

login = () => {
        this.props.userLogin() 
    }

in my mapDispatchToProps dispatching my userLogin action. but How i can pass here to action payload this.state.email and this.state.password for using in my action to send api?

function mapDispatchToProps(dispatch) {
    return {
        userLogin: bindActionCreators(userLogin, dispatch),
    }
}

Upvotes: 0

Views: 1773

Answers (4)

user3348410
user3348410

Reputation: 2833

I solved problem everything work well with my first approach. Here problem was setting state in component with constructor. When i remove constructor everything worked.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281726

While dispatching an action you can pass the required values as arguments like

login = () => {
    this.props.userLogin(this.state.email, this.state.password); 
}

and in the useLogin method in action.js file you can read these arguments like

const userLogin = (email, password) => {
   // your userLogin code here
}

Upvotes: 2

Sania Khushbakht Jamil
Sania Khushbakht Jamil

Reputation: 822

You can do something like this:

function mapDispatchToProps(dispatch, props) {
    return {
        userLogin: bindActionCreators(props.loginInfo, dispatch),
    }
}

and you can call it in this way:

login = () => {
        this.props.userLogin(this.state);
        // state will habe password and username as {username, password}
    }

Upvotes: 1

Webxtutor Rahul
Webxtutor Rahul

Reputation: 1

you can pass state object in action creator and received in action creator as in argument where you received.

Upvotes: 0

Related Questions