Defining mapDispatchToProps As An Object
I am just wondering for Defining mapDispatchToProps As An Object
how can I pass ownProps to it? like in the function I can pass props as an argument.
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId));
};
for an object how to pass ownProps?
const mapDispatchToProps = {
toggleTodo
};
My account got blocked by some down votes questions, the funny thing is I have to re-edit them, even though I already have the accepted answer.I do not understand what's the point to do this.I am so frustrated by this stackoverflow system.
Now, I basically can do nothing but keep editing my questions, and they have all been answered. This is ridiculous !!!
reactjs redux react-redux
add a comment |
I am just wondering for Defining mapDispatchToProps As An Object
how can I pass ownProps to it? like in the function I can pass props as an argument.
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId));
};
for an object how to pass ownProps?
const mapDispatchToProps = {
toggleTodo
};
My account got blocked by some down votes questions, the funny thing is I have to re-edit them, even though I already have the accepted answer.I do not understand what's the point to do this.I am so frustrated by this stackoverflow system.
Now, I basically can do nothing but keep editing my questions, and they have all been answered. This is ridiculous !!!
reactjs redux react-redux
Is the answer to this other question helpful to clarify your concern?
– Oluwafemi Sule
Nov 22 '18 at 21:57
@OluwafemiSule it does not say how to pass ownProps at all.
– Andy Song
Nov 22 '18 at 21:59
I'm not sure I understand it correctly. Are you trying to pass ownProps toconst mapDispatchToProps
without having to declaretoggleTodo
as a method?
– Dhiraj
Nov 22 '18 at 22:44
@DhirajtoggleTodo
is the action what do you mean without having to declare?
– Andy Song
Nov 22 '18 at 22:56
add a comment |
I am just wondering for Defining mapDispatchToProps As An Object
how can I pass ownProps to it? like in the function I can pass props as an argument.
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId));
};
for an object how to pass ownProps?
const mapDispatchToProps = {
toggleTodo
};
My account got blocked by some down votes questions, the funny thing is I have to re-edit them, even though I already have the accepted answer.I do not understand what's the point to do this.I am so frustrated by this stackoverflow system.
Now, I basically can do nothing but keep editing my questions, and they have all been answered. This is ridiculous !!!
reactjs redux react-redux
I am just wondering for Defining mapDispatchToProps As An Object
how can I pass ownProps to it? like in the function I can pass props as an argument.
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId));
};
for an object how to pass ownProps?
const mapDispatchToProps = {
toggleTodo
};
My account got blocked by some down votes questions, the funny thing is I have to re-edit them, even though I already have the accepted answer.I do not understand what's the point to do this.I am so frustrated by this stackoverflow system.
Now, I basically can do nothing but keep editing my questions, and they have all been answered. This is ridiculous !!!
reactjs redux react-redux
reactjs redux react-redux
edited Dec 15 '18 at 4:39
Andy Song
asked Nov 22 '18 at 21:48
Andy SongAndy Song
6018
6018
Is the answer to this other question helpful to clarify your concern?
– Oluwafemi Sule
Nov 22 '18 at 21:57
@OluwafemiSule it does not say how to pass ownProps at all.
– Andy Song
Nov 22 '18 at 21:59
I'm not sure I understand it correctly. Are you trying to pass ownProps toconst mapDispatchToProps
without having to declaretoggleTodo
as a method?
– Dhiraj
Nov 22 '18 at 22:44
@DhirajtoggleTodo
is the action what do you mean without having to declare?
– Andy Song
Nov 22 '18 at 22:56
add a comment |
Is the answer to this other question helpful to clarify your concern?
– Oluwafemi Sule
Nov 22 '18 at 21:57
@OluwafemiSule it does not say how to pass ownProps at all.
– Andy Song
Nov 22 '18 at 21:59
I'm not sure I understand it correctly. Are you trying to pass ownProps toconst mapDispatchToProps
without having to declaretoggleTodo
as a method?
– Dhiraj
Nov 22 '18 at 22:44
@DhirajtoggleTodo
is the action what do you mean without having to declare?
– Andy Song
Nov 22 '18 at 22:56
Is the answer to this other question helpful to clarify your concern?
– Oluwafemi Sule
Nov 22 '18 at 21:57
Is the answer to this other question helpful to clarify your concern?
– Oluwafemi Sule
Nov 22 '18 at 21:57
@OluwafemiSule it does not say how to pass ownProps at all.
– Andy Song
Nov 22 '18 at 21:59
@OluwafemiSule it does not say how to pass ownProps at all.
– Andy Song
Nov 22 '18 at 21:59
I'm not sure I understand it correctly. Are you trying to pass ownProps to
const mapDispatchToProps
without having to declare toggleTodo
as a method?– Dhiraj
Nov 22 '18 at 22:44
I'm not sure I understand it correctly. Are you trying to pass ownProps to
const mapDispatchToProps
without having to declare toggleTodo
as a method?– Dhiraj
Nov 22 '18 at 22:44
@Dhiraj
toggleTodo
is the action what do you mean without having to declare?– Andy Song
Nov 22 '18 at 22:56
@Dhiraj
toggleTodo
is the action what do you mean without having to declare?– Andy Song
Nov 22 '18 at 22:56
add a comment |
2 Answers
2
active
oldest
votes
Short answer: You dont need to. You pass the props into each action as they are called and needed.
Long answer:
mapDispatchToProps
connects your actions to dispatch in the component so you can call the action and pass in required props for it using this.props.action
instead of awkwardly finding dispatch and using this.props.dispatch(action())
or similar.
I find it's simpler to connect your actions to your export and call the action this.props.addUser(prop1,prop2)
when needed - onClick()
, componentDidMount()
etc. It by default assigns dispatch to it without needing to do mapDispatchToProps
. So
export default connect(
mapStateToProps,
{action1, action2, addUser})(User)
then you can use:
addNewUser = () => {
this.props.addUser(this.state.person);
}
where you pass in the props you're after and then do any other work the action or reducer itself (depending on your preference of flow) such as:
export const addUser = user => ({
type: ADD_USER_SUCCESS,
payload: {user}
})
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a newconst
– Andy Song
Nov 22 '18 at 23:37
add a comment |
ownProps
can't be passed to it without doing the wiring in mergeProps
function passed in the connect
function.
You see, when mapDispatchToProps
is an object, whenMapDispatchToPropsIsObject
is invoked. It in turn invokes wrapMapToPropsConstant
which does this
constantSelector.dependsOnOwnProps = false
Now, this property is used to decide whether the action dispatcher should be invoked with props or not. See all handle*
functions like handleNewPropsAndNewState
in src/connect/selectorFactory.js
This is in contrast with what happens when mapDispatchToProps
is a function. In this case, wrapMapToPropsFunc
when invoked wraps the action dispatcher and then invokes it with props.
Without passing mergeProps, you'll need to forward id
prop to the action creator in the Component that is connected with the mapDispatchToProp
e.g.
onClickToggleButton = () => {
const {id, toggleTodo} = this.props
toggleTodo(id)
}
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%2f53438338%2fdefining-mapdispatchtoprops-as-an-object%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
Short answer: You dont need to. You pass the props into each action as they are called and needed.
Long answer:
mapDispatchToProps
connects your actions to dispatch in the component so you can call the action and pass in required props for it using this.props.action
instead of awkwardly finding dispatch and using this.props.dispatch(action())
or similar.
I find it's simpler to connect your actions to your export and call the action this.props.addUser(prop1,prop2)
when needed - onClick()
, componentDidMount()
etc. It by default assigns dispatch to it without needing to do mapDispatchToProps
. So
export default connect(
mapStateToProps,
{action1, action2, addUser})(User)
then you can use:
addNewUser = () => {
this.props.addUser(this.state.person);
}
where you pass in the props you're after and then do any other work the action or reducer itself (depending on your preference of flow) such as:
export const addUser = user => ({
type: ADD_USER_SUCCESS,
payload: {user}
})
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a newconst
– Andy Song
Nov 22 '18 at 23:37
add a comment |
Short answer: You dont need to. You pass the props into each action as they are called and needed.
Long answer:
mapDispatchToProps
connects your actions to dispatch in the component so you can call the action and pass in required props for it using this.props.action
instead of awkwardly finding dispatch and using this.props.dispatch(action())
or similar.
I find it's simpler to connect your actions to your export and call the action this.props.addUser(prop1,prop2)
when needed - onClick()
, componentDidMount()
etc. It by default assigns dispatch to it without needing to do mapDispatchToProps
. So
export default connect(
mapStateToProps,
{action1, action2, addUser})(User)
then you can use:
addNewUser = () => {
this.props.addUser(this.state.person);
}
where you pass in the props you're after and then do any other work the action or reducer itself (depending on your preference of flow) such as:
export const addUser = user => ({
type: ADD_USER_SUCCESS,
payload: {user}
})
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a newconst
– Andy Song
Nov 22 '18 at 23:37
add a comment |
Short answer: You dont need to. You pass the props into each action as they are called and needed.
Long answer:
mapDispatchToProps
connects your actions to dispatch in the component so you can call the action and pass in required props for it using this.props.action
instead of awkwardly finding dispatch and using this.props.dispatch(action())
or similar.
I find it's simpler to connect your actions to your export and call the action this.props.addUser(prop1,prop2)
when needed - onClick()
, componentDidMount()
etc. It by default assigns dispatch to it without needing to do mapDispatchToProps
. So
export default connect(
mapStateToProps,
{action1, action2, addUser})(User)
then you can use:
addNewUser = () => {
this.props.addUser(this.state.person);
}
where you pass in the props you're after and then do any other work the action or reducer itself (depending on your preference of flow) such as:
export const addUser = user => ({
type: ADD_USER_SUCCESS,
payload: {user}
})
Short answer: You dont need to. You pass the props into each action as they are called and needed.
Long answer:
mapDispatchToProps
connects your actions to dispatch in the component so you can call the action and pass in required props for it using this.props.action
instead of awkwardly finding dispatch and using this.props.dispatch(action())
or similar.
I find it's simpler to connect your actions to your export and call the action this.props.addUser(prop1,prop2)
when needed - onClick()
, componentDidMount()
etc. It by default assigns dispatch to it without needing to do mapDispatchToProps
. So
export default connect(
mapStateToProps,
{action1, action2, addUser})(User)
then you can use:
addNewUser = () => {
this.props.addUser(this.state.person);
}
where you pass in the props you're after and then do any other work the action or reducer itself (depending on your preference of flow) such as:
export const addUser = user => ({
type: ADD_USER_SUCCESS,
payload: {user}
})
answered Nov 22 '18 at 23:24
mewcmewc
157215
157215
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a newconst
– Andy Song
Nov 22 '18 at 23:37
add a comment |
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a newconst
– Andy Song
Nov 22 '18 at 23:37
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a new
const
– Andy Song
Nov 22 '18 at 23:37
yes, I understand this, and I know the workaround is that convert the prop to a local variable and pass it to the function exactly like ur example, but sometimes I got a prop from a higher component, I wonder if I can pass the props directly rather than create a new
const
– Andy Song
Nov 22 '18 at 23:37
add a comment |
ownProps
can't be passed to it without doing the wiring in mergeProps
function passed in the connect
function.
You see, when mapDispatchToProps
is an object, whenMapDispatchToPropsIsObject
is invoked. It in turn invokes wrapMapToPropsConstant
which does this
constantSelector.dependsOnOwnProps = false
Now, this property is used to decide whether the action dispatcher should be invoked with props or not. See all handle*
functions like handleNewPropsAndNewState
in src/connect/selectorFactory.js
This is in contrast with what happens when mapDispatchToProps
is a function. In this case, wrapMapToPropsFunc
when invoked wraps the action dispatcher and then invokes it with props.
Without passing mergeProps, you'll need to forward id
prop to the action creator in the Component that is connected with the mapDispatchToProp
e.g.
onClickToggleButton = () => {
const {id, toggleTodo} = this.props
toggleTodo(id)
}
add a comment |
ownProps
can't be passed to it without doing the wiring in mergeProps
function passed in the connect
function.
You see, when mapDispatchToProps
is an object, whenMapDispatchToPropsIsObject
is invoked. It in turn invokes wrapMapToPropsConstant
which does this
constantSelector.dependsOnOwnProps = false
Now, this property is used to decide whether the action dispatcher should be invoked with props or not. See all handle*
functions like handleNewPropsAndNewState
in src/connect/selectorFactory.js
This is in contrast with what happens when mapDispatchToProps
is a function. In this case, wrapMapToPropsFunc
when invoked wraps the action dispatcher and then invokes it with props.
Without passing mergeProps, you'll need to forward id
prop to the action creator in the Component that is connected with the mapDispatchToProp
e.g.
onClickToggleButton = () => {
const {id, toggleTodo} = this.props
toggleTodo(id)
}
add a comment |
ownProps
can't be passed to it without doing the wiring in mergeProps
function passed in the connect
function.
You see, when mapDispatchToProps
is an object, whenMapDispatchToPropsIsObject
is invoked. It in turn invokes wrapMapToPropsConstant
which does this
constantSelector.dependsOnOwnProps = false
Now, this property is used to decide whether the action dispatcher should be invoked with props or not. See all handle*
functions like handleNewPropsAndNewState
in src/connect/selectorFactory.js
This is in contrast with what happens when mapDispatchToProps
is a function. In this case, wrapMapToPropsFunc
when invoked wraps the action dispatcher and then invokes it with props.
Without passing mergeProps, you'll need to forward id
prop to the action creator in the Component that is connected with the mapDispatchToProp
e.g.
onClickToggleButton = () => {
const {id, toggleTodo} = this.props
toggleTodo(id)
}
ownProps
can't be passed to it without doing the wiring in mergeProps
function passed in the connect
function.
You see, when mapDispatchToProps
is an object, whenMapDispatchToPropsIsObject
is invoked. It in turn invokes wrapMapToPropsConstant
which does this
constantSelector.dependsOnOwnProps = false
Now, this property is used to decide whether the action dispatcher should be invoked with props or not. See all handle*
functions like handleNewPropsAndNewState
in src/connect/selectorFactory.js
This is in contrast with what happens when mapDispatchToProps
is a function. In this case, wrapMapToPropsFunc
when invoked wraps the action dispatcher and then invokes it with props.
Without passing mergeProps, you'll need to forward id
prop to the action creator in the Component that is connected with the mapDispatchToProp
e.g.
onClickToggleButton = () => {
const {id, toggleTodo} = this.props
toggleTodo(id)
}
edited Nov 23 '18 at 0:47
answered Nov 22 '18 at 23:39
Oluwafemi SuleOluwafemi Sule
12.4k1635
12.4k1635
add a comment |
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%2f53438338%2fdefining-mapdispatchtoprops-as-an-object%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
Is the answer to this other question helpful to clarify your concern?
– Oluwafemi Sule
Nov 22 '18 at 21:57
@OluwafemiSule it does not say how to pass ownProps at all.
– Andy Song
Nov 22 '18 at 21:59
I'm not sure I understand it correctly. Are you trying to pass ownProps to
const mapDispatchToProps
without having to declaretoggleTodo
as a method?– Dhiraj
Nov 22 '18 at 22:44
@Dhiraj
toggleTodo
is the action what do you mean without having to declare?– Andy Song
Nov 22 '18 at 22:56