Dispatching an action in the function outside mapDispatchToProps - reactjs

Question

I want to know about dispatch function and mapDispatchToProps function.How they work and when to use.Any guideline for them?
I am currently working on a MERN stack project where i need to post a name on mongoose.I successfully post on database but after posting i also want to send it to redux store via dispatching an action with data.But I am getting dispatch is not a function error.Why I an geting this error.I have stated const {dispatch} = props in constructor function
Here is my about.js page code
import React, { Component } from 'react';
import fetch from 'isomorphic-unfetch'
import { connect } from 'react-redux'
import {addName} from '../Actions/actionCreators'
class about extends Component {
static async getInitialProps({ req }){
try{
const protocol = req.headers['x-forwarded-proto'] || 'http'
const baseUrl = req ? `${protocol}://${req.headers.host}` : ''
const url = `${baseUrl}/api/users`
return { apiUrl: url }
}catch{
return { error: 'Could not load configs'}
}
}
constructor(props){
super(props)
const {dispatch} = props
this.state = { name: '' }
this.addname = this.addname.bind(this)
}
addname(e){
e.preventDefault()
const {dispatch} = this.props
const name = e.target.name.value
const newName = {
name : name
}
fetch(this.props.apiUrl, {
method: 'POST',
body: JSON.stringify(newName),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then( r =>
r.json()
)
.then( (data) => dispatch(addName(data.name)) )
.catch(err => console.error('POST error', err));
}
render() {
const markup = this.props.name.name.length > 0 ? this.props.name.name.map((elem, i) => (
<div key={i}>
{this.props.name.name[i]}
</div>
)) : <p></p>
return (
<div>
<h2> About me </h2>
{markup}
<form action="" onSubmit={this.addname}>
<br/>
<input type="text" name="name" placeholder="Your Name" />
<br/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return{
submitform : (e) => {
e.preventDefault()
dispatch(addName(e.target.name.value))
}
}
}
const mapStateToProps = state => {
return{
name : state.name
}
}
export default connect(mapStateToProps, mapDispatchToProps)(about)
You can notice <form action="" onSubmit={this.addname}> here addName is a function which posts the name to databse.
You can also submitform in
const mapDispatchToProps = dispatch => {
return{
submitform : (e) => {
e.preventDefault()
dispatch(addName(e.target.name.value))
}
}
}
this submitform submits directly to redux-state.but i want to submit first to DB and then redux-state

Answer 1

Since you are using mapDispatchToProps you won't have dispatch available as prop to the component. The idea way would be to expose addName from mapDispatchToProps
class about extends Component {
static async getInitialProps({ req }){
try{
const protocol = req.headers['x-forwarded-proto'] || 'http'
const baseUrl = req ? `${protocol}://${req.headers.host}` : ''
const url = `${baseUrl}/api/users`
return { apiUrl: url }
}catch{
return { error: 'Could not load configs'}
}
}
constructor(props){
super(props)
const {dispatch} = props
this.state = { name: '' }
this.addname = this.addname.bind(this)
}
addname(e){
e.preventDefault()
const {addName} = this.props
const name = e.target.name.value
const newName = {
name : name
}
fetch(this.props.apiUrl, {
method: 'POST',
body: JSON.stringify(newName),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then( r =>
r.json()
)
.then( (data) => addName(data.name) )
.catch(err => console.error('POST error', err));
}
render() {
const markup = this.props.name.name.length > 0 ? this.props.name.name.map((elem, i) => (
<div key={i}>
{this.props.name.name[i]}
</div>
)) : <p></p>
return (
<div>
<h2> About me </h2>
{markup}
<form action="" onSubmit={this.addname}>
<br/>
<input type="text" name="name" placeholder="Your Name" />
<br/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return{
submitform : (e) => {
e.preventDefault()
dispatch(addName(e.target.name.value))
},
addName: (name) => {
dispatch(addName(name))
}
}
}