In React/Redux, fetch a list from a server and create a randomized subset with lifecycle methods
up vote
1
down vote
favorite
This is my first React/Redux project. I'm pulling down a list of Google Fonts, then displaying a list of 3 randomly selected ones. I want the list of random fonts to be populated automatically after the data is fetched, but also to be able to be triggered manually.
So, I've decided to put the fetch code in the action creator and the randomizing code in the component. The fetch is activated from componentWillMount() while the randomizing function is called from componentDidUpdate().
This is the only combination I was able to come up with that works without any errors, but it sure looks janky. Is this considered acceptable?
import React, { Component } from 'react';
import Font from './Font';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import WebFont from 'webfontloader';
import { fetchFonts, setRandomFonts } from '../actions/fontActions'
export class Fonts extends Component {
static propTypes = {
allFonts: PropTypes.array,
randomFonts: PropTypes.array.isRequired,
sampleSentence: PropTypes.string.isRequired,
categoriesWanted: PropTypes.array.isRequired,
fontCount: PropTypes.number.isRequired,
fetchFonts: PropTypes.func.isRequired
}
componentWillMount() {
this.props.fetchFonts();
}
componentDidUpdate() {
if (this.props.randomFonts.length === 0) {
this.randomizeFonts();
}
}
getRandomFont = arr => arr[this.random(arr.length) - 1];
random = max => Math.floor(Math.random() * max) + 1;
randomizeFonts = () => {
const { categoriesWanted, fontCount, allFonts } = this.props;
const fontList = ;
if (allFonts.length === 0) return;
while (fontList.length < fontCount) {
const font = this.getRandomFont(allFonts);
// add the font if it's the right category and it's not
// already in the list
if (categoriesWanted.includes(font.category)
&& !fontList.includes(font)) {
fontList.push(font);
}
}
WebFont.load({
google: {
families: fontList.map(font => font.family)
}
});
this.props.setRandomFonts(fontList);
}
render() {
return (
<div className="container">
{this.props.randomFonts.map(
font => (<Font
key={font.family}
font={font}
sampleSentence={this.props.sampleSentence}
/>)
)}
</div>
)
}
}
const mapStateToProps = state => ({
allFonts: state.fonts.allFonts,
randomFonts: state.fonts.randomFonts,
sampleSentence: state.fonts.sampleSentence,
categoriesWanted: state.fonts.categoriesWanted,
fontCount: state.fonts.fontCount
});
export default connect(mapStateToProps, { fetchFonts, setRandomFonts })(Fonts);
react.js jsx redux
edited 7 hours ago
200_success
128k15149412
asked 7 hours ago
Alesh Houdek
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
favorite
This is my first React/Redux project. I'm pulling down a list of Google Fonts, then displaying a list of 3 randomly selected ones. I want the list of random fonts to be populated automatically after the data is fetched, but also to be able to be triggered manually.
So, I've decided to put the fetch code in the action creator and the randomizing code in the component. The fetch is activated from componentWillMount() while the randomizing function is called from componentDidUpdate().
This is the only combination I was able to come up with that works without any errors, but it sure looks janky. Is this considered acceptable?
import React, { Component } from 'react';
import Font from './Font';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import WebFont from 'webfontloader';
import { fetchFonts, setRandomFonts } from '../actions/fontActions'
export class Fonts extends Component {
static propTypes = {
allFonts: PropTypes.array,
randomFonts: PropTypes.array.isRequired,
sampleSentence: PropTypes.string.isRequired,
categoriesWanted: PropTypes.array.isRequired,
fontCount: PropTypes.number.isRequired,
fetchFonts: PropTypes.func.isRequired
}
componentWillMount() {
this.props.fetchFonts();
}
componentDidUpdate() {
if (this.props.randomFonts.length === 0) {
this.randomizeFonts();
}
}
getRandomFont = arr => arr[this.random(arr.length) - 1];
random = max => Math.floor(Math.random() * max) + 1;
randomizeFonts = () => {
const { categoriesWanted, fontCount, allFonts } = this.props;
const fontList = ;
if (allFonts.length === 0) return;
while (fontList.length < fontCount) {
const font = this.getRandomFont(allFonts);
// add the font if it's the right category and it's not
// already in the list
if (categoriesWanted.includes(font.category)
&& !fontList.includes(font)) {
fontList.push(font);
}
}
WebFont.load({
google: {
families: fontList.map(font => font.family)
}
});
this.props.setRandomFonts(fontList);
}
render() {
return (
<div className="container">
{this.props.randomFonts.map(
font => (<Font
key={font.family}
font={font}
sampleSentence={this.props.sampleSentence}
/>)
)}
</div>
)
}
}
const mapStateToProps = state => ({
allFonts: state.fonts.allFonts,
randomFonts: state.fonts.randomFonts,
sampleSentence: state.fonts.sampleSentence,
categoriesWanted: state.fonts.categoriesWanted,
fontCount: state.fonts.fontCount
});
export default connect(mapStateToProps, { fetchFonts, setRandomFonts })(Fonts);
react.js jsx redux
edited 7 hours ago
200_success
128k15149412
asked 7 hours ago
Alesh Houdek
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
This is my first React/Redux project. I'm pulling down a list of Google Fonts, then displaying a list of 3 randomly selected ones. I want the list of random fonts to be populated automatically after the data is fetched, but also to be able to be triggered manually.
So, I've decided to put the fetch code in the action creator and the randomizing code in the component. The fetch is activated from componentWillMount() while the randomizing function is called from componentDidUpdate().
This is the only combination I was able to come up with that works without any errors, but it sure looks janky. Is this considered acceptable?
import React, { Component } from 'react';
import Font from './Font';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import WebFont from 'webfontloader';
import { fetchFonts, setRandomFonts } from '../actions/fontActions'
export class Fonts extends Component {
static propTypes = {
allFonts: PropTypes.array,
randomFonts: PropTypes.array.isRequired,
sampleSentence: PropTypes.string.isRequired,
categoriesWanted: PropTypes.array.isRequired,
fontCount: PropTypes.number.isRequired,
fetchFonts: PropTypes.func.isRequired
}
componentWillMount() {
this.props.fetchFonts();
}
componentDidUpdate() {
if (this.props.randomFonts.length === 0) {
this.randomizeFonts();
}
}
getRandomFont = arr => arr[this.random(arr.length) - 1];
random = max => Math.floor(Math.random() * max) + 1;
randomizeFonts = () => {
const { categoriesWanted, fontCount, allFonts } = this.props;
const fontList = ;
if (allFonts.length === 0) return;
while (fontList.length < fontCount) {
const font = this.getRandomFont(allFonts);
// add the font if it's the right category and it's not
// already in the list
if (categoriesWanted.includes(font.category)
&& !fontList.includes(font)) {
fontList.push(font);
}
}
WebFont.load({
google: {
families: fontList.map(font => font.family)
}
});
this.props.setRandomFonts(fontList);
}
render() {
return (
<div className="container">
{this.props.randomFonts.map(
font => (<Font
key={font.family}
font={font}
sampleSentence={this.props.sampleSentence}
/>)
)}
</div>
)
}
}
const mapStateToProps = state => ({
allFonts: state.fonts.allFonts,
randomFonts: state.fonts.randomFonts,
sampleSentence: state.fonts.sampleSentence,
categoriesWanted: state.fonts.categoriesWanted,
fontCount: state.fonts.fontCount
});
export default connect(mapStateToProps, { fetchFonts, setRandomFonts })(Fonts);
react.js jsx redux
edited 7 hours ago
200_success
128k15149412
asked 7 hours ago
Alesh Houdek
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This is my first React/Redux project. I'm pulling down a list of Google Fonts, then displaying a list of 3 randomly selected ones. I want the list of random fonts to be populated automatically after the data is fetched, but also to be able to be triggered manually.
So, I've decided to put the fetch code in the action creator and the randomizing code in the component. The fetch is activated from componentWillMount() while the randomizing function is called from componentDidUpdate().
This is the only combination I was able to come up with that works without any errors, but it sure looks janky. Is this considered acceptable?
import React, { Component } from 'react';
import Font from './Font';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import WebFont from 'webfontloader';
import { fetchFonts, setRandomFonts } from '../actions/fontActions'
export class Fonts extends Component {
static propTypes = {
allFonts: PropTypes.array,
randomFonts: PropTypes.array.isRequired,
sampleSentence: PropTypes.string.isRequired,
categoriesWanted: PropTypes.array.isRequired,
fontCount: PropTypes.number.isRequired,
fetchFonts: PropTypes.func.isRequired
}
componentWillMount() {
this.props.fetchFonts();
}
componentDidUpdate() {
if (this.props.randomFonts.length === 0) {
this.randomizeFonts();
}
}
getRandomFont = arr => arr[this.random(arr.length) - 1];
random = max => Math.floor(Math.random() * max) + 1;
randomizeFonts = () => {
const { categoriesWanted, fontCount, allFonts } = this.props;
const fontList = ;
if (allFonts.length === 0) return;
while (fontList.length < fontCount) {
const font = this.getRandomFont(allFonts);
// add the font if it's the right category and it's not
// already in the list
if (categoriesWanted.includes(font.category)
&& !fontList.includes(font)) {
fontList.push(font);
}
}
WebFont.load({
google: {
families: fontList.map(font => font.family)
}
});
this.props.setRandomFonts(fontList);
}
render() {
return (
<div className="container">
{this.props.randomFonts.map(
font => (<Font
key={font.family}
font={font}
sampleSentence={this.props.sampleSentence}
/>)
)}
</div>
)
}
}
const mapStateToProps = state => ({
allFonts: state.fonts.allFonts,
randomFonts: state.fonts.randomFonts,
sampleSentence: state.fonts.sampleSentence,
categoriesWanted: state.fonts.categoriesWanted,
fontCount: state.fonts.fontCount
});
export default connect(mapStateToProps, { fetchFonts, setRandomFonts })(Fonts);
react.js jsx redux
react.js jsx redux
edited 7 hours ago
200_success
128k15149412
asked 7 hours ago
Alesh Houdek
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 7 hours ago
200_success
128k15149412
asked 7 hours ago
Alesh Houdek
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 7 hours ago
200_success
128k15149412
edited 7 hours ago
200_success
128k15149412
edited 7 hours ago
200_success
128k15149412
128k15149412
asked 7 hours ago
Alesh Houdek
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 7 hours ago
Alesh Houdek
1063
asked 7 hours ago
Alesh Houdek
1063
1063
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Alesh Houdek is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
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',
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
});
}
});
Alesh Houdek is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
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%2f209644%2fin-react-redux-fetch-a-list-from-a-server-and-create-a-randomized-subset-with-l%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Alesh Houdek is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Alesh Houdek is a new contributor. Be nice, and check out our Code of Conduct.
Alesh Houdek is a new contributor. Be nice, and check out our Code of Conduct.
Alesh Houdek is a new contributor. Be nice, and check out our Code of Conduct.
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f209644%2fin-react-redux-fetch-a-list-from-a-server-and-create-a-randomized-subset-with-l%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
