Mixing
how to type react-redux connect in flow?
This is what my mapStateToProps looks like.
const mapStateToProps = (state): StateProps => {
let status = false;
if (state.productsPage.currentProduct) {
if (state.productsPage.currentProduct.status === "ACTIVE") {
status = true;
}
}
return {
showModal: state.productsPage.showModal,
currentProduct: state.productsPage.currentProduct,
isLoading: state.status.loading.PRODUCTS_EDIT,
initialValues: {
name: state.productsPage.currentProduct ? state.productsPage.currentProduct.name : "",
status,
},
};
};
Here is the shape of StateProps
type StateProps = {
showModal: boolean,
currentProduct: Object,
isLoading: boolean,
initialValues: {
name: string,
status: boolean,
}
}
This is my usage of connect.
const connected = connect<React$StatelessFunctionalComponent<any>, StateProps>(mapStateToProps, mapDispatchToProps);
This produces the following error, and I have no idea what it means or how to go about solving it.
[flow] Cannot call
connectbecause propertycurrentProductis
missing inReact.StatelessFunctionalComponent[1] in the indexer
property's key of type argumentST. (References: [1])
javascript reactjs react-redux flowtype
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
add a comment |
This is what my mapStateToProps looks like.
const mapStateToProps = (state): StateProps => {
let status = false;
if (state.productsPage.currentProduct) {
if (state.productsPage.currentProduct.status === "ACTIVE") {
status = true;
}
}
return {
showModal: state.productsPage.showModal,
currentProduct: state.productsPage.currentProduct,
isLoading: state.status.loading.PRODUCTS_EDIT,
initialValues: {
name: state.productsPage.currentProduct ? state.productsPage.currentProduct.name : "",
status,
},
};
};
Here is the shape of StateProps
type StateProps = {
showModal: boolean,
currentProduct: Object,
isLoading: boolean,
initialValues: {
name: string,
status: boolean,
}
}
This is my usage of connect.
const connected = connect<React$StatelessFunctionalComponent<any>, StateProps>(mapStateToProps, mapDispatchToProps);
This produces the following error, and I have no idea what it means or how to go about solving it.
[flow] Cannot call
connectbecause propertycurrentProductis
missing inReact.StatelessFunctionalComponent[1] in the indexer
property's key of type argumentST. (References: [1])
javascript reactjs react-redux flowtype
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
add a comment |
This is what my mapStateToProps looks like.
const mapStateToProps = (state): StateProps => {
let status = false;
if (state.productsPage.currentProduct) {
if (state.productsPage.currentProduct.status === "ACTIVE") {
status = true;
}
}
return {
showModal: state.productsPage.showModal,
currentProduct: state.productsPage.currentProduct,
isLoading: state.status.loading.PRODUCTS_EDIT,
initialValues: {
name: state.productsPage.currentProduct ? state.productsPage.currentProduct.name : "",
status,
},
};
};
Here is the shape of StateProps
type StateProps = {
showModal: boolean,
currentProduct: Object,
isLoading: boolean,
initialValues: {
name: string,
status: boolean,
}
}
This is my usage of connect.
const connected = connect<React$StatelessFunctionalComponent<any>, StateProps>(mapStateToProps, mapDispatchToProps);
This produces the following error, and I have no idea what it means or how to go about solving it.
[flow] Cannot call
connectbecause propertycurrentProductis
missing inReact.StatelessFunctionalComponent[1] in the indexer
property's key of type argumentST. (References: [1])
javascript reactjs react-redux flowtype
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
This is what my mapStateToProps looks like.
const mapStateToProps = (state): StateProps => {
let status = false;
if (state.productsPage.currentProduct) {
if (state.productsPage.currentProduct.status === "ACTIVE") {
status = true;
}
}
return {
showModal: state.productsPage.showModal,
currentProduct: state.productsPage.currentProduct,
isLoading: state.status.loading.PRODUCTS_EDIT,
initialValues: {
name: state.productsPage.currentProduct ? state.productsPage.currentProduct.name : "",
status,
},
};
};
Here is the shape of StateProps
type StateProps = {
showModal: boolean,
currentProduct: Object,
isLoading: boolean,
initialValues: {
name: string,
status: boolean,
}
}
This is my usage of connect.
const connected = connect<React$StatelessFunctionalComponent<any>, StateProps>(mapStateToProps, mapDispatchToProps);
This produces the following error, and I have no idea what it means or how to go about solving it.
[flow] Cannot call
connectbecause propertycurrentProductis
missing inReact.StatelessFunctionalComponent[1] in the indexer
property's key of type argumentST. (References: [1])
javascript reactjs react-redux flowtype
javascript reactjs react-redux flowtype
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
edited Nov 20 '18 at 17:21
skyboyer
3,54111128
3,54111128
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
asked Nov 20 '18 at 16:09
Chaim FriedmanChaim Friedman
2,728832
2,728832
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
React$StatelessFunctionalComponent is a generic that expects prop types. Instead of <any>, you would want the props that that function expects to receive -- most importantly, it expects to receive your StateProps returned by mapStateToProps (though it may expect others in addition).
It may change depending on version of react-redux, but I am seeing some documentation that suggests that the generics for connect are the return value of mapStateToProps, not a React element. - Source
You may be needing connect<StateProps, DispatchPropsIfAny> instead of providing an Element type.
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
not sure about the any vs prop types, you may be right about that will try soon, but the first argument inconnectgenerics has to have a callable signature, at least in the version of react-redux flow typed I am using.
– Chaim Friedman
Nov 20 '18 at 16:43
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%2f53397055%2fhow-to-type-react-redux-connect-in-flow%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
React$StatelessFunctionalComponent is a generic that expects prop types. Instead of <any>, you would want the props that that function expects to receive -- most importantly, it expects to receive your StateProps returned by mapStateToProps (though it may expect others in addition).
It may change depending on version of react-redux, but I am seeing some documentation that suggests that the generics for connect are the return value of mapStateToProps, not a React element. - Source
You may be needing connect<StateProps, DispatchPropsIfAny> instead of providing an Element type.
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
not sure about the any vs prop types, you may be right about that will try soon, but the first argument inconnectgenerics has to have a callable signature, at least in the version of react-redux flow typed I am using.
– Chaim Friedman
Nov 20 '18 at 16:43
add a comment |
React$StatelessFunctionalComponent is a generic that expects prop types. Instead of <any>, you would want the props that that function expects to receive -- most importantly, it expects to receive your StateProps returned by mapStateToProps (though it may expect others in addition).
It may change depending on version of react-redux, but I am seeing some documentation that suggests that the generics for connect are the return value of mapStateToProps, not a React element. - Source
You may be needing connect<StateProps, DispatchPropsIfAny> instead of providing an Element type.
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
not sure about the any vs prop types, you may be right about that will try soon, but the first argument inconnectgenerics has to have a callable signature, at least in the version of react-redux flow typed I am using.
– Chaim Friedman
Nov 20 '18 at 16:43
add a comment |
React$StatelessFunctionalComponent is a generic that expects prop types. Instead of <any>, you would want the props that that function expects to receive -- most importantly, it expects to receive your StateProps returned by mapStateToProps (though it may expect others in addition).
It may change depending on version of react-redux, but I am seeing some documentation that suggests that the generics for connect are the return value of mapStateToProps, not a React element. - Source
You may be needing connect<StateProps, DispatchPropsIfAny> instead of providing an Element type.
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
React$StatelessFunctionalComponent is a generic that expects prop types. Instead of <any>, you would want the props that that function expects to receive -- most importantly, it expects to receive your StateProps returned by mapStateToProps (though it may expect others in addition).
It may change depending on version of react-redux, but I am seeing some documentation that suggests that the generics for connect are the return value of mapStateToProps, not a React element. - Source
You may be needing connect<StateProps, DispatchPropsIfAny> instead of providing an Element type.
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
answered Nov 20 '18 at 16:39
Charles StoverCharles Stover
83339
83339
not sure about the any vs prop types, you may be right about that will try soon, but the first argument inconnectgenerics has to have a callable signature, at least in the version of react-redux flow typed I am using.
– Chaim Friedman
Nov 20 '18 at 16:43
add a comment |
not sure about the any vs prop types, you may be right about that will try soon, but the first argument inconnectgenerics has to have a callable signature, at least in the version of react-redux flow typed I am using.
– Chaim Friedman
Nov 20 '18 at 16:43
not sure about the any vs prop types, you may be right about that will try soon, but the first argument in
connect generics has to have a callable signature, at least in the version of react-redux flow typed I am using.– Chaim Friedman
Nov 20 '18 at 16:43
not sure about the any vs prop types, you may be right about that will try soon, but the first argument in
connect generics has to have a callable signature, at least in the version of react-redux flow typed I am using.– Chaim Friedman
Nov 20 '18 at 16:43
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%2f53397055%2fhow-to-type-react-redux-connect-in-flow%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
