How does connect take in mapStateToProps and mapDispatchToProps to create a higher order component?
I've been trying to figure out two things regarding redux
mapDispatchToPropsis a function that takes indispatchas an argument, where isdispatchdefined? and- how does
connectutilizemapStateToPropsandmapDispatchToPropsto create HOC(Higher Order Component) ?
If I understand correctly, connect is essentially a compositional function that takes the result of mapDispatchToProps and passes it to mapStateToProps then returns the result, which is a component, but how is it done?
Thank you for your time!
redux react-redux
edited Nov 20 '18 at 8:18
wgao19
34326
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
add a comment |
I've been trying to figure out two things regarding redux
mapDispatchToPropsis a function that takes indispatchas an argument, where isdispatchdefined? and- how does
connectutilizemapStateToPropsandmapDispatchToPropsto create HOC(Higher Order Component) ?
If I understand correctly, connect is essentially a compositional function that takes the result of mapDispatchToProps and passes it to mapStateToProps then returns the result, which is a component, but how is it done?
Thank you for your time!
redux react-redux
edited Nov 20 '18 at 8:18
wgao19
34326
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
add a comment |
I've been trying to figure out two things regarding redux
mapDispatchToPropsis a function that takes indispatchas an argument, where isdispatchdefined? and- how does
connectutilizemapStateToPropsandmapDispatchToPropsto create HOC(Higher Order Component) ?
If I understand correctly, connect is essentially a compositional function that takes the result of mapDispatchToProps and passes it to mapStateToProps then returns the result, which is a component, but how is it done?
Thank you for your time!
redux react-redux
edited Nov 20 '18 at 8:18
wgao19
34326
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
I've been trying to figure out two things regarding redux
mapDispatchToPropsis a function that takes indispatchas an argument, where isdispatchdefined? and- how does
connectutilizemapStateToPropsandmapDispatchToPropsto create HOC(Higher Order Component) ?
If I understand correctly, connect is essentially a compositional function that takes the result of mapDispatchToProps and passes it to mapStateToProps then returns the result, which is a component, but how is it done?
Thank you for your time!
redux react-redux
redux react-redux
edited Nov 20 '18 at 8:18
wgao19
34326
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
edited Nov 20 '18 at 8:18
wgao19
34326
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
edited Nov 20 '18 at 8:18
wgao19
34326
edited Nov 20 '18 at 8:18
wgao19
34326
edited Nov 20 '18 at 8:18
wgao19
34326
34326
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
asked Nov 19 '18 at 8:31
Michael ChengMichael Cheng
52
52
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
mapDispatchToPropsis a function that you will define. React-Redux calls your function withdispatchpassed in as the first parameter. And thatdispatch, in turn, comes from thestoreyou provided to<Provider />.
connecttakes themapStateandmapDispatchthat you will define, and create the wrapper function that, in the most common cases:
- run
mapStatewithstateevery time your store changes - run
mapDispatchonce when the component is instantiated
The returns of both of these functions will be merged into your wrapped component.
- run
Seems that you'd like to figure out how it is done. This Dan Abramov's gist explains connect in a mental modal (simplified version of what it does).
Hope that helps!
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
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%2f53370881%2fhow-does-connect-take-in-mapstatetoprops-and-mapdispatchtoprops-to-create-a-high%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
mapDispatchToPropsis a function that you will define. React-Redux calls your function withdispatchpassed in as the first parameter. And thatdispatch, in turn, comes from thestoreyou provided to<Provider />.
connecttakes themapStateandmapDispatchthat you will define, and create the wrapper function that, in the most common cases:
- run
mapStatewithstateevery time your store changes - run
mapDispatchonce when the component is instantiated
The returns of both of these functions will be merged into your wrapped component.
- run
Seems that you'd like to figure out how it is done. This Dan Abramov's gist explains connect in a mental modal (simplified version of what it does).
Hope that helps!
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
add a comment |
mapDispatchToPropsis a function that you will define. React-Redux calls your function withdispatchpassed in as the first parameter. And thatdispatch, in turn, comes from thestoreyou provided to<Provider />.
connecttakes themapStateandmapDispatchthat you will define, and create the wrapper function that, in the most common cases:
- run
mapStatewithstateevery time your store changes - run
mapDispatchonce when the component is instantiated
The returns of both of these functions will be merged into your wrapped component.
- run
Seems that you'd like to figure out how it is done. This Dan Abramov's gist explains connect in a mental modal (simplified version of what it does).
Hope that helps!
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
add a comment |
mapDispatchToPropsis a function that you will define. React-Redux calls your function withdispatchpassed in as the first parameter. And thatdispatch, in turn, comes from thestoreyou provided to<Provider />.
connecttakes themapStateandmapDispatchthat you will define, and create the wrapper function that, in the most common cases:
- run
mapStatewithstateevery time your store changes - run
mapDispatchonce when the component is instantiated
The returns of both of these functions will be merged into your wrapped component.
- run
Seems that you'd like to figure out how it is done. This Dan Abramov's gist explains connect in a mental modal (simplified version of what it does).
Hope that helps!
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
mapDispatchToPropsis a function that you will define. React-Redux calls your function withdispatchpassed in as the first parameter. And thatdispatch, in turn, comes from thestoreyou provided to<Provider />.
connecttakes themapStateandmapDispatchthat you will define, and create the wrapper function that, in the most common cases:
- run
mapStatewithstateevery time your store changes - run
mapDispatchonce when the component is instantiated
The returns of both of these functions will be merged into your wrapped component.
- run
Seems that you'd like to figure out how it is done. This Dan Abramov's gist explains connect in a mental modal (simplified version of what it does).
Hope that helps!
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
answered Nov 20 '18 at 4:12
wgao19wgao19
34326
34326
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%2f53370881%2fhow-does-connect-take-in-mapstatetoprops-and-mapdispatchtoprops-to-create-a-high%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
