React Hooks conditional in useEffect The 2019 Stack Overflow Developer Survey Results Are...
Is this app Icon Browser Safe/Legit?
Origin of "cooter" meaning "vagina"
Can a rogue use sneak attack with weapons that have the thrown property even if they are not thrown?
Can someone be penalized for an "unlawful" act if no penalty is specified?
Does the shape of a die affect the probability of a number being rolled?
"as much details as you can remember"
Why did Acorn's A3000 have red function keys?
Did Scotland spend $250,000 for the slogan "Welcome to Scotland"?
What are the motivations for publishing new editions of an existing textbook, beyond new discoveries in a field?
Apparent duplicates between Haynes service instructions and MOT
Are there incongruent pythagorean triangles with the same perimeter and same area?
What is the meaning of Triage in Cybersec world?
Shouldn't "much" here be used instead of "more"?
Is a "Democratic" Oligarchy-Style System Possible?
How come people say “Would of”?
Aging parents with no investments
Loose spokes after only a few rides
Right tool to dig six foot holes?
When should I buy a clipper card after flying to OAK?
The difference between dialogue marks
What is the motivation for a law requiring 2 parties to consent for recording a conversation
Should I use my personal e-mail address, or my workplace one, when registering to external websites for work purposes?
Button changing it's text & action. Good or terrible?
Is there any way to tell whether the shot is going to hit you or not?
React Hooks conditional in useEffect
The 2019 Stack Overflow Developer Survey Results Are InCRUD application using React-ReduxReact/Redux 401 MiddlewareReact Redux quiz appReact component with conditional form loadingRewriting Crime Map - React Component with ReduxReact Redux default playgroundTODO in React w/ ReduxSimple blog using react redux react-routerFibonacci-Counter implemented with React-ReduxBMI calculator with React Hooks
.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 redux
asked 6 mins ago
dwjohnstondwjohnston
671516
$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 redux
asked 6 mins ago
dwjohnstondwjohnston
671516
$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 redux
asked 6 mins ago
dwjohnstondwjohnston
671516
$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 redux
react.js redux
asked 6 mins ago
dwjohnstondwjohnston
671516
asked 6 mins ago
dwjohnstondwjohnston
671516
asked 6 mins ago
dwjohnstondwjohnston
671516
asked 6 mins ago
dwjohnstondwjohnston
671516
asked 6 mins ago
dwjohnstondwjohnston
671516
671516
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
