Redux-form to pass data by a POST request. - reactjs

Question

I have to update my user's profile that has 5 fields name, bio address, image, and gender. I have created perfectly working API on Django that uses auth Knox token for authentication.
I have stored the auth token during login in the state. Of which the reducer looks like this:
case 'LOGIN_SUCCESSFUL':
case 'REGISTRATION_SUCCESSFUL':
localStorage.setItem("token", action.data.token);
return {...state, ...action.data, isAuthenticated: true, isLoading: false, errors: null};
I can access the token later on like this:
let headers = {"Content-Type": "application/json"};
let {token} = getState().auth;
if (token) {
headers["Authorization"] = `Token ${token}`;
}
My question is:
How can I make a form that takes this token as a header and makes a post request? What will be the reducers and what will be the actions?
class Profile extends Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(e) {
e.preventDefault()
console.log(this.props.Name)
}
change = e => {
console.log(e.target.name)
values.push(e.target.value)
[e.target.name]: e.target.value
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<label htmlFor="Name">Name</label>
<input name="Name" onChange={e => this.change(e)} component="input" type="text" />
</div>
<div>
<label htmlFor="Bio">Bio</label>
<input name="Bio" component="input" onChange={e => this.change(e)} type="text" />
</div>
<div>
<label htmlFor="Address">Address</label>
<input name="Address" component="input" onChange={e => this.change(e)} type="text" />
</div>
<button type="submit">Submit</button>
</form>
)
}
}
const mapStateToProps = (state) => {
return {
profile: state.user,
}
}
const mapDiapatchToProps = (dispatch) => {
return {
updateprofile: (values) => dispatch(updateprofile(values))
}
}
export default connect(mapStateToProps, mapDiapatchToProps)(Profile);
I tried this but I got confused how to send values to action?
Or Should I have to use redux-form?
I want to make a put request on this API: api/update/profile/${id}
Please help me out.

Answer 1

You need to use an external library to make a HTTP call, like Axios.
In your action file you need to create the function updateProfile. Inside this function you need to make the HTTP call using Axios, or wathever you want. With axios your function will be something like this:
function updateProfile() {
return (dispatch) => {
axios({
method:'get',
url:'[YOUR API ADDRESS]',
headers: {Authorization: '[YOUR TOKEN]'},
data: {
name: 'bruce',
lastName: 'bane'
}
}).then(function(response) {
dispatch({
type: UPDATE_PROFILE,
payload: response
});
});
return null
}
}
In youe Profile component you need to change the mapDispatchToProps function to call the updateProfile function from the action file, like this:
const mapDispatchToProps = (dispatch) => {
return {
updateprofile: (values) => dispatch(profileActions.updateprofile(values))
}
}
Note: I didn't tested this code, but it will be something close to this. Hope it could help.