I have created a form with email, firstname, lastname details. Now I want to make a POST request to localhost:5000/api/users
and want to store it in mongo database. How can I make use of redux ? I have implemented it using on reactjs only how can I make use of redux ? Note: I am using redux thunk.
Code:
login.js:
import React, { Component } from 'react'
import './login.css'
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
firstName:'',
lastName:'',
email:''
}
this.onChangeHandler = this.onChangeHandler.bind(this)
this.onSubmitHandler = this.onSubmitHandler.bind(this)
}
onChangeHandler(e){
this.setState({ [e.target.name]: e.target.value })
}
onSubmitHandler(e){
e.preventDefault();
console.log(this.state)
}
render() {
return (
<div>
<form onSubmit={this.onSubmitHandler}>
<label>
FirstName:
<input type="text" name="firstName" value={this.state.firstName} onChange={this.onChangeHandler} />
</label>
<label>
LastName:
<input type="text" name="lastName" value={this.state.lastName} onChange={this.onChangeHandler} />
</label>
<label>
Email:
<input type="text" name="email" value={this.state.email} onChange={this.onChangeHandler} />
</label>
<button type="submit" className="btn btn-default">Submit</button>
</form>
</div>
)
}
}
loginAction.js:
import { ADD_USER } from './types';
import axios from 'axios';
export const userLoginRequest = () => dispatch => {
axios.post(`localhost:5000/api/users`)
.then( userdata =>
dispatch({
type: ADD_USER,
payload: userdata
})
)
.catch( error => {
console.log(error);
});
};
loginReducer.js:
import { ADD_USER } from '../actions/types';
const initialState = {
firstName: '',
lastName: '',
email: ''
}
export default function (state = initialState, action) {
switch (action.type) {
case ADD_USER:
return {
...state,
items: action.payload
};
default:
return state;
}
}
I am not able to understand do I need to create 3 actions each one for firstname, lastname and email ? In that case what will be those 3 actions will it have 3 POST req in each of them ?