React Hooks conditional in useEffect
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
$begingroup$
I'm starting using hooks, and I have a specific scenario that I'm thinking useEffectis appropriate for.
Essentially what I'm doing is:
- I have some
ssiDatain the redux store. - If that data has an invite code, and the invite isn't already accepted, then I want to display a QR code
- If the invite is accepted, then this component will not be displayed.
- If I am displaying the QR code, then I want to dispatch an action that is going to poll for updates to the
ssiData
- But if the user navigates away - I want to cancel the polling.
- If the connection is accepted while the QR is displayed, I want to stop polling, and the QR to disappear.
The idea is - the QR is displayed to the user, they use their phone to scan it to accept the invite.
So the way I've done this is:
function SsiQrCodeRender({ ssiData, pollForChanges, cancelPolling }) {
const classes = useStyles();
const image = "data:image/png;base64," + qrImage.imageSync(JSON.stringify(ssiData.invite)).toString('base64');
useEffect(() => {
pollForChanges(ssiData.ssiId)
return () => {
cancelPolling();
}
})
return <Card
component="section"
>
<img src={image} className={classes.root} />
</Card>;
}
const mapStateToProps = (
state,
ownProps
) => {
return {
ssiData: ssiInitConnectionRedux.dataSelector(state)
};
};
const mapDispatchToProps = dispatch => {
return {
pollForChanges: (ssiId) => dispatch(ssiPollForConnectionChangeRedux.actionFn(ssiId)),
cancelPolling: () => dispatch(ssiCancelPolling.actionFn()),
};
};
export const SsiQrCode = connect(
mapStateToProps,
mapDispatchToProps
)(SsiQrCodeRender);
And the parent component (simplified):
function SsiStudentLinkPanelRender({ ssiData, doDisplayQr }) {
const classes = useStyles();
return <Card
component = "section"
className={classes.root}>
{doDisplayQr && <SsiQrCode />}
</Card>;
}
const doDisplayQrSelector = (ssiData) => {
return ssiData.invite && ssiData.connectionState !==4 ;
}
const mapStateToProps = (
state,
ownProps
) => {
const ssiData = ssiInitConnectionRedux.dataSelector(state);
return {
ssiData,
doDisplayQr: doDisplayQrSelector(ssiData),
};
};
const mapDispatchToProps = dispatch => {
return {
};
export const SsiStudentLinkPanel = connect(
mapStateToProps,
mapDispatchToProps
)(SsiStudentLinkPanelRender);
Am I going about this the right way? What I've got so far seems to work ok (although I haven't actually implemented the start polling/stop polling actions).
There's something that seems a bit complicated and flakey with this.
Is this code written such that it will necessarily have a one to one mapping of 'start polling' to 'stop polling' actions?
react.js jsx redux
edited 28 mins ago
200_success
131k17157422
asked 1 hour ago
dwjohnstondwjohnston
676516
$endgroup$
add a comment |
$begingroup$
I'm starting using hooks, and I have a specific scenario that I'm thinking useEffectis appropriate for.
Essentially what I'm doing is:
- I have some
ssiDatain the redux store. - If that data has an invite code, and the invite isn't already accepted, then I want to display a QR code
- If the invite is accepted, then this component will not be displayed.
- If I am displaying the QR code, then I want to dispatch an action that is going to poll for updates to the
ssiData
- But if the user navigates away - I want to cancel the polling.
- If the connection is accepted while the QR is displayed, I want to stop polling, and the QR to disappear.
The idea is - the QR is displayed to the user, they use their phone to scan it to accept the invite.
So the way I've done this is:
function SsiQrCodeRender({ ssiData, pollForChanges, cancelPolling }) {
const classes = useStyles();
const image = "data:image/png;base64," + qrImage.imageSync(JSON.stringify(ssiData.invite)).toString('base64');
useEffect(() => {
pollForChanges(ssiData.ssiId)
return () => {
cancelPolling();
}
})
return <Card
component="section"
>
<img src={image} className={classes.root} />
</Card>;
}
const mapStateToProps = (
state,
ownProps
) => {
return {
ssiData: ssiInitConnectionRedux.dataSelector(state)
};
};
const mapDispatchToProps = dispatch => {
return {
pollForChanges: (ssiId) => dispatch(ssiPollForConnectionChangeRedux.actionFn(ssiId)),
cancelPolling: () => dispatch(ssiCancelPolling.actionFn()),
};
};
export const SsiQrCode = connect(
mapStateToProps,
mapDispatchToProps
)(SsiQrCodeRender);
And the parent component (simplified):
function SsiStudentLinkPanelRender({ ssiData, doDisplayQr }) {
const classes = useStyles();
return <Card
component = "section"
className={classes.root}>
{doDisplayQr && <SsiQrCode />}
</Card>;
}
const doDisplayQrSelector = (ssiData) => {
return ssiData.invite && ssiData.connectionState !==4 ;
}
const mapStateToProps = (
state,
ownProps
) => {
const ssiData = ssiInitConnectionRedux.dataSelector(state);
return {
ssiData,
doDisplayQr: doDisplayQrSelector(ssiData),
};
};
const mapDispatchToProps = dispatch => {
return {
};
export const SsiStudentLinkPanel = connect(
mapStateToProps,
mapDispatchToProps
)(SsiStudentLinkPanelRender);
Am I going about this the right way? What I've got so far seems to work ok (although I haven't actually implemented the start polling/stop polling actions).
There's something that seems a bit complicated and flakey with this.
Is this code written such that it will necessarily have a one to one mapping of 'start polling' to 'stop polling' actions?
react.js jsx redux
edited 28 mins ago
200_success
131k17157422
asked 1 hour ago
dwjohnstondwjohnston
676516
$endgroup$
add a comment |
$begingroup$
I'm starting using hooks, and I have a specific scenario that I'm thinking useEffectis appropriate for.
Essentially what I'm doing is:
- I have some
ssiDatain the redux store. - If that data has an invite code, and the invite isn't already accepted, then I want to display a QR code
- If the invite is accepted, then this component will not be displayed.
- If I am displaying the QR code, then I want to dispatch an action that is going to poll for updates to the
ssiData
- But if the user navigates away - I want to cancel the polling.
- If the connection is accepted while the QR is displayed, I want to stop polling, and the QR to disappear.
The idea is - the QR is displayed to the user, they use their phone to scan it to accept the invite.
So the way I've done this is:
function SsiQrCodeRender({ ssiData, pollForChanges, cancelPolling }) {
const classes = useStyles();
const image = "data:image/png;base64," + qrImage.imageSync(JSON.stringify(ssiData.invite)).toString('base64');
useEffect(() => {
pollForChanges(ssiData.ssiId)
return () => {
cancelPolling();
}
})
return <Card
component="section"
>
<img src={image} className={classes.root} />
</Card>;
}
const mapStateToProps = (
state,
ownProps
) => {
return {
ssiData: ssiInitConnectionRedux.dataSelector(state)
};
};
const mapDispatchToProps = dispatch => {
return {
pollForChanges: (ssiId) => dispatch(ssiPollForConnectionChangeRedux.actionFn(ssiId)),
cancelPolling: () => dispatch(ssiCancelPolling.actionFn()),
};
};
export const SsiQrCode = connect(
mapStateToProps,
mapDispatchToProps
)(SsiQrCodeRender);
And the parent component (simplified):
function SsiStudentLinkPanelRender({ ssiData, doDisplayQr }) {
const classes = useStyles();
return <Card
component = "section"
className={classes.root}>
{doDisplayQr && <SsiQrCode />}
</Card>;
}
const doDisplayQrSelector = (ssiData) => {
return ssiData.invite && ssiData.connectionState !==4 ;
}
const mapStateToProps = (
state,
ownProps
) => {
const ssiData = ssiInitConnectionRedux.dataSelector(state);
return {
ssiData,
doDisplayQr: doDisplayQrSelector(ssiData),
};
};
const mapDispatchToProps = dispatch => {
return {
};
export const SsiStudentLinkPanel = connect(
mapStateToProps,
mapDispatchToProps
)(SsiStudentLinkPanelRender);
Am I going about this the right way? What I've got so far seems to work ok (although I haven't actually implemented the start polling/stop polling actions).
There's something that seems a bit complicated and flakey with this.
Is this code written such that it will necessarily have a one to one mapping of 'start polling' to 'stop polling' actions?
react.js jsx redux
edited 28 mins ago
200_success
131k17157422
asked 1 hour ago
dwjohnstondwjohnston
676516
$endgroup$
I'm starting using hooks, and I have a specific scenario that I'm thinking useEffectis appropriate for.
Essentially what I'm doing is:
- I have some
ssiDatain the redux store. - If that data has an invite code, and the invite isn't already accepted, then I want to display a QR code
- If the invite is accepted, then this component will not be displayed.
- If I am displaying the QR code, then I want to dispatch an action that is going to poll for updates to the
ssiData
- But if the user navigates away - I want to cancel the polling.
- If the connection is accepted while the QR is displayed, I want to stop polling, and the QR to disappear.
The idea is - the QR is displayed to the user, they use their phone to scan it to accept the invite.
So the way I've done this is:
function SsiQrCodeRender({ ssiData, pollForChanges, cancelPolling }) {
const classes = useStyles();
const image = "data:image/png;base64," + qrImage.imageSync(JSON.stringify(ssiData.invite)).toString('base64');
useEffect(() => {
pollForChanges(ssiData.ssiId)
return () => {
cancelPolling();
}
})
return <Card
component="section"
>
<img src={image} className={classes.root} />
</Card>;
}
const mapStateToProps = (
state,
ownProps
) => {
return {
ssiData: ssiInitConnectionRedux.dataSelector(state)
};
};
const mapDispatchToProps = dispatch => {
return {
pollForChanges: (ssiId) => dispatch(ssiPollForConnectionChangeRedux.actionFn(ssiId)),
cancelPolling: () => dispatch(ssiCancelPolling.actionFn()),
};
};
export const SsiQrCode = connect(
mapStateToProps,
mapDispatchToProps
)(SsiQrCodeRender);
And the parent component (simplified):
function SsiStudentLinkPanelRender({ ssiData, doDisplayQr }) {
const classes = useStyles();
return <Card
component = "section"
className={classes.root}>
{doDisplayQr && <SsiQrCode />}
</Card>;
}
const doDisplayQrSelector = (ssiData) => {
return ssiData.invite && ssiData.connectionState !==4 ;
}
const mapStateToProps = (
state,
ownProps
) => {
const ssiData = ssiInitConnectionRedux.dataSelector(state);
return {
ssiData,
doDisplayQr: doDisplayQrSelector(ssiData),
};
};
const mapDispatchToProps = dispatch => {
return {
};
export const SsiStudentLinkPanel = connect(
mapStateToProps,
mapDispatchToProps
)(SsiStudentLinkPanelRender);
Am I going about this the right way? What I've got so far seems to work ok (although I haven't actually implemented the start polling/stop polling actions).
There's something that seems a bit complicated and flakey with this.
Is this code written such that it will necessarily have a one to one mapping of 'start polling' to 'stop polling' actions?
react.js jsx redux
react.js jsx redux
edited 28 mins ago
200_success
131k17157422
asked 1 hour ago
dwjohnstondwjohnston
676516
edited 28 mins ago
200_success
131k17157422
asked 1 hour ago
dwjohnstondwjohnston
676516
edited 28 mins ago
200_success
131k17157422
edited 28 mins ago
200_success
131k17157422
edited 28 mins ago
200_success
131k17157422
131k17157422
asked 1 hour ago
dwjohnstondwjohnston
676516
asked 1 hour ago
dwjohnstondwjohnston
676516
asked 1 hour ago
dwjohnstondwjohnston
676516
676516
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
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: "196"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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%2fcodereview.stackexchange.com%2fquestions%2f217240%2freact-hooks-conditional-in-useeffect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
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%2fcodereview.stackexchange.com%2fquestions%2f217240%2freact-hooks-conditional-in-useeffect%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
