Uncaught TypeError: this.props.dispatch is not a function
I am trying to dispatch an action when I submit a form but I'm getting this:
Uncaught TypeError: this.props.dispatch is not a function
This is my class:
/**
*
* CatalogPage
*
*/
import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Form, Control } from 'react-redux-form/immutable';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectCatalogPage from './selectors';
import reducer from './reducer';
import saga from './saga';
export class CatalogPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
render() {
return (
<Form
model="user"
onSubmit={(user) => this.handleSubmit(user)}
>
<label htmlFor=".firstName">First name:</label>
<Control.text model=".firstName" id=".firstName"/>
<label htmlFor=".lastName">Last name:</label>
<Control.text model=".lastName" id=".lastName"/>
<button type="submit">
Finish registration!
</button>
</Form>
);
}
}
CatalogPage.propTypes = {};
const mapStateToProps = createStructuredSelector({
catalogpage: makeSelectCatalogPage(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'catalogPage', reducer });
const withSaga = injectSaga({ key: 'catalogPage', saga });
export default compose(
withReducer,
withSaga,
withConnect,
)(CatalogPage);
I thought that the compose function at the bottom would connect my component to the store and thus have access to the dispatch function through this.props.dispatch. But it's not working, what am I missing?
Thanks!
EDIT: I've changed handleSubmit to arrow function but problem still persists
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
EDIT: The problem resolved itself
Something to mention is that react-boiler-plate is not as user-friendly as one might expect. There's alot of weird things that are happening and took me a long time to debug.
reactjs react-redux-form
add a comment |
I am trying to dispatch an action when I submit a form but I'm getting this:
Uncaught TypeError: this.props.dispatch is not a function
This is my class:
/**
*
* CatalogPage
*
*/
import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Form, Control } from 'react-redux-form/immutable';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectCatalogPage from './selectors';
import reducer from './reducer';
import saga from './saga';
export class CatalogPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
render() {
return (
<Form
model="user"
onSubmit={(user) => this.handleSubmit(user)}
>
<label htmlFor=".firstName">First name:</label>
<Control.text model=".firstName" id=".firstName"/>
<label htmlFor=".lastName">Last name:</label>
<Control.text model=".lastName" id=".lastName"/>
<button type="submit">
Finish registration!
</button>
</Form>
);
}
}
CatalogPage.propTypes = {};
const mapStateToProps = createStructuredSelector({
catalogpage: makeSelectCatalogPage(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'catalogPage', reducer });
const withSaga = injectSaga({ key: 'catalogPage', saga });
export default compose(
withReducer,
withSaga,
withConnect,
)(CatalogPage);
I thought that the compose function at the bottom would connect my component to the store and thus have access to the dispatch function through this.props.dispatch. But it's not working, what am I missing?
Thanks!
EDIT: I've changed handleSubmit to arrow function but problem still persists
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
EDIT: The problem resolved itself
Something to mention is that react-boiler-plate is not as user-friendly as one might expect. There's alot of weird things that are happening and took me a long time to debug.
reactjs react-redux-form
add a comment |
I am trying to dispatch an action when I submit a form but I'm getting this:
Uncaught TypeError: this.props.dispatch is not a function
This is my class:
/**
*
* CatalogPage
*
*/
import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Form, Control } from 'react-redux-form/immutable';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectCatalogPage from './selectors';
import reducer from './reducer';
import saga from './saga';
export class CatalogPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
render() {
return (
<Form
model="user"
onSubmit={(user) => this.handleSubmit(user)}
>
<label htmlFor=".firstName">First name:</label>
<Control.text model=".firstName" id=".firstName"/>
<label htmlFor=".lastName">Last name:</label>
<Control.text model=".lastName" id=".lastName"/>
<button type="submit">
Finish registration!
</button>
</Form>
);
}
}
CatalogPage.propTypes = {};
const mapStateToProps = createStructuredSelector({
catalogpage: makeSelectCatalogPage(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'catalogPage', reducer });
const withSaga = injectSaga({ key: 'catalogPage', saga });
export default compose(
withReducer,
withSaga,
withConnect,
)(CatalogPage);
I thought that the compose function at the bottom would connect my component to the store and thus have access to the dispatch function through this.props.dispatch. But it's not working, what am I missing?
Thanks!
EDIT: I've changed handleSubmit to arrow function but problem still persists
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
EDIT: The problem resolved itself
Something to mention is that react-boiler-plate is not as user-friendly as one might expect. There's alot of weird things that are happening and took me a long time to debug.
reactjs react-redux-form
I am trying to dispatch an action when I submit a form but I'm getting this:
Uncaught TypeError: this.props.dispatch is not a function
This is my class:
/**
*
* CatalogPage
*
*/
import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Form, Control } from 'react-redux-form/immutable';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectCatalogPage from './selectors';
import reducer from './reducer';
import saga from './saga';
export class CatalogPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
render() {
return (
<Form
model="user"
onSubmit={(user) => this.handleSubmit(user)}
>
<label htmlFor=".firstName">First name:</label>
<Control.text model=".firstName" id=".firstName"/>
<label htmlFor=".lastName">Last name:</label>
<Control.text model=".lastName" id=".lastName"/>
<button type="submit">
Finish registration!
</button>
</Form>
);
}
}
CatalogPage.propTypes = {};
const mapStateToProps = createStructuredSelector({
catalogpage: makeSelectCatalogPage(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'catalogPage', reducer });
const withSaga = injectSaga({ key: 'catalogPage', saga });
export default compose(
withReducer,
withSaga,
withConnect,
)(CatalogPage);
I thought that the compose function at the bottom would connect my component to the store and thus have access to the dispatch function through this.props.dispatch. But it's not working, what am I missing?
Thanks!
EDIT: I've changed handleSubmit to arrow function but problem still persists
handleSubmit = (user) => {
this.props.dispatch({ type: 'test action' });
}
EDIT: The problem resolved itself
Something to mention is that react-boiler-plate is not as user-friendly as one might expect. There's alot of weird things that are happening and took me a long time to debug.
reactjs react-redux-form
reactjs react-redux-form
edited Feb 14 '18 at 5:57
johnwick0831
asked Feb 14 '18 at 1:10
johnwick0831johnwick0831
231217
231217
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The problem here is the misunderstanding of a class method and the way that React manages instances.
You can do three things to avoid this problem:
1) Convert the (handleSubmit) function to an arrow function so in that case, it won't have its own this
.
handleSubmit = (user) => { // ...logic here }
2) Create a constructor inside the component and do the next step:
this.handleSubmit = this.handleSubmit.bind(this)
In this case, you attach this
to the function each time an instance is created.
3) When you call the method inside the render use the .bind()
to bind this
:
onSubmit={(user) => this.handleSubmit.bind(this, user)}
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
add a comment |
You don't need mapDispatchToProps if you just want to inject dispatch into your component. You would use that when you want to bind your action creators before injecting them into your component. Just pass mapStateToProps with no second param and you should be good.
You also need to do what Jose Gomez suggests below. Basically you need to bind this. The easiest way is to just change handleSubmit to an arrow function
handleSubmit = user => {
...
}
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48778202%2funcaught-typeerror-this-props-dispatch-is-not-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem here is the misunderstanding of a class method and the way that React manages instances.
You can do three things to avoid this problem:
1) Convert the (handleSubmit) function to an arrow function so in that case, it won't have its own this
.
handleSubmit = (user) => { // ...logic here }
2) Create a constructor inside the component and do the next step:
this.handleSubmit = this.handleSubmit.bind(this)
In this case, you attach this
to the function each time an instance is created.
3) When you call the method inside the render use the .bind()
to bind this
:
onSubmit={(user) => this.handleSubmit.bind(this, user)}
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
add a comment |
The problem here is the misunderstanding of a class method and the way that React manages instances.
You can do three things to avoid this problem:
1) Convert the (handleSubmit) function to an arrow function so in that case, it won't have its own this
.
handleSubmit = (user) => { // ...logic here }
2) Create a constructor inside the component and do the next step:
this.handleSubmit = this.handleSubmit.bind(this)
In this case, you attach this
to the function each time an instance is created.
3) When you call the method inside the render use the .bind()
to bind this
:
onSubmit={(user) => this.handleSubmit.bind(this, user)}
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
add a comment |
The problem here is the misunderstanding of a class method and the way that React manages instances.
You can do three things to avoid this problem:
1) Convert the (handleSubmit) function to an arrow function so in that case, it won't have its own this
.
handleSubmit = (user) => { // ...logic here }
2) Create a constructor inside the component and do the next step:
this.handleSubmit = this.handleSubmit.bind(this)
In this case, you attach this
to the function each time an instance is created.
3) When you call the method inside the render use the .bind()
to bind this
:
onSubmit={(user) => this.handleSubmit.bind(this, user)}
The problem here is the misunderstanding of a class method and the way that React manages instances.
You can do three things to avoid this problem:
1) Convert the (handleSubmit) function to an arrow function so in that case, it won't have its own this
.
handleSubmit = (user) => { // ...logic here }
2) Create a constructor inside the component and do the next step:
this.handleSubmit = this.handleSubmit.bind(this)
In this case, you attach this
to the function each time an instance is created.
3) When you call the method inside the render use the .bind()
to bind this
:
onSubmit={(user) => this.handleSubmit.bind(this, user)}
edited Nov 20 '18 at 22:00
Roy Scheffers
2,238101926
2,238101926
answered Feb 14 '18 at 1:18
Jose GomezJose Gomez
314
314
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
add a comment |
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
I have added the => like this handleSubmit = (user) => { dispatch({type: 'hello world'}); }; and i'm still getting the same error. I've edited my class to show what i have now
– johnwick0831
Feb 14 '18 at 1:30
add a comment |
You don't need mapDispatchToProps if you just want to inject dispatch into your component. You would use that when you want to bind your action creators before injecting them into your component. Just pass mapStateToProps with no second param and you should be good.
You also need to do what Jose Gomez suggests below. Basically you need to bind this. The easiest way is to just change handleSubmit to an arrow function
handleSubmit = user => {
...
}
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
add a comment |
You don't need mapDispatchToProps if you just want to inject dispatch into your component. You would use that when you want to bind your action creators before injecting them into your component. Just pass mapStateToProps with no second param and you should be good.
You also need to do what Jose Gomez suggests below. Basically you need to bind this. The easiest way is to just change handleSubmit to an arrow function
handleSubmit = user => {
...
}
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
add a comment |
You don't need mapDispatchToProps if you just want to inject dispatch into your component. You would use that when you want to bind your action creators before injecting them into your component. Just pass mapStateToProps with no second param and you should be good.
You also need to do what Jose Gomez suggests below. Basically you need to bind this. The easiest way is to just change handleSubmit to an arrow function
handleSubmit = user => {
...
}
You don't need mapDispatchToProps if you just want to inject dispatch into your component. You would use that when you want to bind your action creators before injecting them into your component. Just pass mapStateToProps with no second param and you should be good.
You also need to do what Jose Gomez suggests below. Basically you need to bind this. The easiest way is to just change handleSubmit to an arrow function
handleSubmit = user => {
...
}
answered Feb 14 '18 at 1:18
Keith RousseauKeith Rousseau
4,05111728
4,05111728
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
add a comment |
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
What do you mean? This is what i currently have: const withConnect = connect(mapStateToProps, mapDispatchToProps); Do you mean to do this: const withConnect = connect(mapStateToProps, null); ??
– johnwick0831
Feb 14 '18 at 1:31
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
I mean you don't need that second param at all. You can do connect(mapStateToProps). The second param is if you are binding your action creators. I usually pass in my action creators object and then it will bind them and inject them for you. I never actually pass dispatch into my components.
– Keith Rousseau
Feb 14 '18 at 16:24
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48778202%2funcaught-typeerror-this-props-dispatch-is-not-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown