This is part 11 (the last part!) of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

In flavor #10, I’m using global state management (with Redux) to help me update the different components with the current application state using React to build the UI.

In this flavor, I continue using Redux to help me update the different components with the current application state, but the app is calling an asynchronous endpoint as the data (quotes) is requested from an external resource (a JSON stored in a public content delivery network (CDN)) (like in flavor #5). This time, however, I’m using React to build the UI (not manually building the UI with HTML, like previously in flavor #5).

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes (this flavor)
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

If you’re curious about what comes up next in Morse Wall and would like to make a writer very happy today, you should subscribe to Morse Wall.

Flavor #11: HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes

Much like in flavor #10, I’m creating a Redux store that manages the state of the entire app. The React components can then subscribe to the pieces of data in the store that are relevant to them. Actions are dispatched directly from React components. These dispatched actions then ultimately trigger store updates (for more on state, check “What is state?” in flavor #4).

Much of the Redux and Redux Thunk code in this flavor remains the same as in flavor #5, so it may be helpful to give that writing a quick read. Similarly, reading flavor #10 may be helpful, given most of the React components used in this flavor have been detailed there. Also, much of the React Redux code here remains the same as in flavor #10.

Like previously in flavor #9, I’m storing the quotes in a separate JSON file in jsDelivr, a public CDN.

Calling asynchronous endpoints in Redux

I am using the Redux Thunk middleware between the actions being dispatched and the actions reaching the reducer (for more on actions and reducers, check flavor #4).

Redux Thunk helps me handle the challenge in that, by default, actions in Redux are dispatched synchronously. For more on Redux Thunk, check flavor #5 - Calling asynchronous endpoints in Redux as well as flavor #5 - Adding the Redux Thunk library and flavor #5 - Creating the Redux store when using the Redux Thunk middleware .

The design of doing one batch endpoint call versus multiple endpoint calls is detailed in flavor #5 - Designing for one batch endpoint call versus multiple endpoint calls. The same thinking applies to this flavor.

Working through the user stories

From the user stories, I want to be welcomed by a quote when I first load the app. In other words, I want to be able to read the quote from the Redux store on first “content” page load. For the first user story, I’ll be calling an asynchronous function (handleAsync) through the useEffect Hook in my React component.

By using useEffect, I’m effectively telling React that the component needs to do this “effect” after the browser has painted. React will call the function passed to useEffect later, after performing the DOM updates. For more on useEffect, check flavor #9 - Controlling asynchronous code in React with Hooks.

Then, I need to ship user story #2: I want to be able to click a UI element (a button) to get a new quote. To achieve this, I’ll be dispatching another action from my React component with the help of chosenRandomQuoteToState (defined in my React component further down).

Redux and initial state - Show me the code already!

Defining actions, action creators and the reducer in full:

//script.js
// defining action types for the special asynch action creator-type function
const REQUESTING_API_DATA = "REQUESTING_API_DATA";
const RECEIVED_API_DATA = "RECEIVED_API_DATA";

// defining action creators related to the asynch function. Action creator is  a function that returns an action (object that contains information about an action-event that has occurred). The action creator gets called by `dispatch()`
const requestingApiData = () => {
  return {
    type: REQUESTING_API_DATA,
  };
};

const receivedApiData = (apiData) => {
  return {
    type: RECEIVED_API_DATA,
    payloadQuotes: apiData,
  };
};

//defining an action type
const NEW_QUOTE = "NEW_QUOTE";

//defining an action creator, which creates the action to select a new quote.  The action creator is a function that returns an action (object that contains information about an action-event that has occurred). It creates the action to add a new quote.
const newQuoteActionCreator = (chosenQuoteInput) => {
  return {
    type: NEW_QUOTE,
    payloadQuote: chosenQuoteInput,
  };
};

// defining initial state
const initialState = {
  status: "",
  quotesData: [],
};

//defining reducer functions to allow the Redux store to know how to respond to the action created
const getNextQuoteReducer = (state = initialState, action) => {
  switch (action.type) {
    case REQUESTING_API_DATA:
      return {
        ...state,
        status: "waiting",
        quotesData: [],
      };
    case RECEIVED_API_DATA:
      return {
        ...state,
        status: "received",
        quotesData: action.payloadQuotes,
      };
    case NEW_QUOTE:
      return {
        ...state,
        status: "new quote",
        data: action.payloadQuote,
      };
    default:
      return state;
  }
};

Pretty much all code in the snippet above follows the Redux logic implemented in part 5 of this series - A new action creator. So, check that writing out for a deeper dive down.

With the above in place, I can define the asynchronous function that allows me to create an asynchronous action (hit an asynchronous endpoint). For this, I return a function in an action creator that takes dispatch as an argument. Within this function, I can dispatch actions and perform asynchronous requests.

//script.js
// defining a special action creator that returns a function. The returned function takes dispatch as an argument. Within this function, I can dispatch actions and perform asynchronous requests. It's common to dispatch an action before initiating any asynchronous behavior so that the application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once the application receives the data, another action is dispatched, an action that carries the data as a payload along with information that the action is completed.
const handleAsync = () => {
  return function (dispatch) {
    // dispatch request action here
    store.dispatch(requestingApiData());
    const makeRequest = async () => {
      const responseJSON = await fetch(
        "https://cdn.jsdelivr.net/gh/morsewall/jsondb@master/db.json"
      );
      const responseObject = await responseJSON.json();
      const quotesArray = responseObject.quotes;
      // dispatch received data action here
      store.dispatch(receivedApiData(quotesArray));
      let initialQuote =
        quotesArray[Math.floor(Math.random() * quotesArray.length)];
      store.dispatch(newQuoteActionCreator(initialQuote));
    };
    makeRequest();
  };
};

Nearly all the code in the above snippet is covered in flavor #5 - Calling asynchronous endpoints in Redux. The difference here is that I’ve decided to follow a slightly different approach and dispatch a new random quote to the Redux store as soon as I’ve fetched the quotes from JSON file (previously, in flavor #5, I’ve used a Redux selector that would take state as an argument and return a randomly selected quote object).

As handleAsync is dispatched (more on dispatching handleAsync, with the help of useEffect, further down), an update of the state in the Redux store is triggered with the help of the reducer. The Redux store will then keep the full JSON contents stored in the state as well as a first randomly selected quote.

No JavaScript modules here (again)

For the reasons I’ve detailed in flavor #6, I’m not dividing this flavor’s code into modules. This can be noted when comparing this flavor’s code with flavor #5’s source code, which is modularized.

A visual look into the application’s execution flow

In summary, I’m changing the state in the Redux store with the contents of a full JSON file and random quotes that get selected as the application runs. Redux updates the store with help from action creators, the Redux Thunk middleware, a reducer and the React Redux API.

On high-level, data flows in a similar way to part 5 of this series - A visual look into the application’s execution flow : Different React components, such as the Get New Quote button, trigger state changes in the Redux store (with a new random quote) and a React component next updates the UI with the new state.

React Redux - specifying state and actions to React

By now I have the Redux code in place but still need to provide React (React code further down) access to the Redux store and the actions it needs to dispatch updates. I’m getting this done with the React Redux package. For more on React Redux, including the code for <Provider /> and connect(), check flavor #10 - React Redux API.

mapStateToProps

//script.js
//mapping state to props. Allows me to specify exactly what pieces of the state should the React component have access to. Taking state as argument, it returns an object which maps that state to specific property names. These properties will become accessible to the React component via props
const mapStateToProps = (state) => {
  return {
    currentQuote: state.data,
    stateQuotes: state.quotesData,
    stateStatus: state.status,
  };
};

mapStateToProps is called every time the store state changes. It maps state to specific property names (in this case currentQuote for data - check the reducer above, stateQuotes for quotesData and stateStatus for status). These properties are then accessible to my React component via props (with the help of connect() - check flavor #10 - React Redux API for more on it).

mapDispatchToProps

mapDispatchToProps receives dispatch and returns an object that maps dispatch actions to specific property names (in this case selectNewQuote, which I will be calling inside my React component further down and handleAsyncFx, which I’m calling with useEffect in the React component).

These properties are then accessible to my React component via props (through connect()). Each property returns a function that calls dispatch with an action creator (in this casenewQuoteActionCreator and handleAsync - check action creators above) and any relevant action data (a randomly selected quote in the case of newQuoteActionCreator).

//script.js
//mapping dispatch to props. Specifying what actions should the React component have access to. Allows me to specify which action creators I need to be able to dispatch. It is used to provide specific action creators to the React components so they can dispatch actions against the Redux store. It returns an object that maps dispatch actions to property names, which become component props. As opposed to mapStateToProps (that returns a piece of state), here each property returns a function that calls dispatch with an action creator and any relevant action data. I have access to this dispatch because it's passed in to mapDispatchToProps() as a parameter when I define the function, just like I've passed state to mapStateToProps(). The object should have a property selectNewQuote set to the dispatch function, which takes a parameter for the new quote to add when it dispatches newQuoteActionCreator(). It should also have a property handleAsyncFX set to a dispatch function that dispatches handleAsync().
const mapDispatchToProps = (dispatch) => {
  return {
    selectNewQuote: function (quoteToBeNewQuote) {
      dispatch(newQuoteActionCreator(quoteToBeNewQuote));
    },
    handleAsyncFX: function () {
      dispatch(handleAsync());
    },
  };
};

The loading component

Since I’m hitting an asynchronous endpoint in this flavor, I’m adjusting my code to make sure that the application will only try to render the quote when I have the data available.

As part of this “code adjustment”, I’m creating a React component (a loading spinner) that renders before the quotes data is available to be rendered, i.e. before I’ve finished fetching the data from the JSON file.

// script.js
//defining a component for the loading spinner
const Loading = () => {
  return (
    <div className="loading-container">
      <div className="loader-dzg" />
    </div>
  );
};

React Dispatching Actions

I now have all the Redux, Redux Thunk and React Redux bits in place. The bit missing is to define the React function component that will build the UI.

The async/await function (props.handleAsyncFX) passed to useEffect will run after the render is committed to the screen. This is great since I don’t want to stop the App component from mounting. For more on useEffect, check flavor #9 - Controlling asynchronous code in React with Hooks.

I want the component to go ahead, render the Loading component and only re-render when fetch() has finished fetching the requested resource from the network (data from the JSON file).

By default, effects run after every completed render and since I’m setting the state after every data fetch, the component would update and the effect would run again. It would fetch the data again and again. To avoid this, and only fetch data when the component mounts, I provide an empty array ([]) as second argument to useEffect to avoid activating it on component updates. This tells React that the effect doesn’t depend on any values from props or state, so it never needs to re-run.

//script.js
// defining the function component. Redux state and dispatch are passed to the component as props
const App = (props) => {
  React.useEffect(() => {
    props.handleAsyncFX();
  }, []);

  const random = (array) => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = (array) => {
    return array[random(array)];
  };

  //defining a function to (ultimately) update the Redux state with a new quote. Passing a randomly selected quote via props. Dispatching selectNewQuote() from props and passing in the randomly selected new quote as an argument
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(props.stateQuotes);
    props.selectNewQuote(chosenQuote);
  };

  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI.
  //as a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
  return (
    <React.Fragment>
      {(() => {
        switch (props.stateStatus) {
          case "waiting":
            return <Loading />;
          case "received":
            return <Loading />;
          case "new quote":
            return (
              <React.Fragment>
                <div className="container">
                  <div id="quote-box">
                    {/* //passing data via props to QuoteBox component */}
                    <QuoteBox
                      text={props.currentQuote.quoteText}
                      author={props.currentQuote.quoteAuthor}
                    />
                    <div className="actions">
                      <Button
                        id="new-quote"
                        title="Get New Quote"
                        onClick={chosenRandomQuoteToState}
                      />
                      <TwitterShare link={twitterLink} />
                    </div>
                  </div>
                </div>
                <footer>
                  <ul className="footer-options">
                    <li className="footer-link">
                      <a href="#" className="footer-linktext">
                        Legal
                      </a>
                    </li>
                    <li className="footer-link">
                      <a href="#" className="footer-linktext">
                        Contact Us
                      </a>
                    </li>
                  </ul>
                  <span>
                    © 2019 Developed by Pat Eskinasy. All Rights Reserved.
                  </span>
                </footer>
              </React.Fragment>
            );
        }
      })()}
    </React.Fragment>
  );
};

App reads state from the Redux store (given Redux is passing state to App via props) and the newly selected random quote will render on the screen (for more on passing props, check flavor #10 - Passing props to components).

Then, when the Get New Quote button is clicked, React calls chosenRandomQuoteToState, which calls selectNewQuote (see mapDispatchToProps above), as it has been passed as props to App. Now, provided the specific action creator (newQuoteActionCreator, coming from mapDispatchToProps), the React component can dispatch actions against the Redux store and update the state with a new quote.

Action! What happens in the Redux store

As I use Redux DevTools Extension to time travel in the application’s state, I can check the state of the Redux store at every point in time.

Illustrated below in the extension is the data object (holding the current randomly selected quote).

Making the machine tweet and voilà

Defining App, the function component, now in full:

//script.js
// defining the function component. Redux state and dispatch are passed to the component as props
const App = (props) => {
  React.useEffect(() => {
    props.handleAsyncFX();
  }, []);

  //making the machine tweet
  let twitterLink;

  if (props.currentQuote) {
    let quoteTextElem = props.currentQuote.quoteText;
    let quoteAuthorElem = " - " + props.currentQuote.quoteAuthor;
    let contentQuote = quoteTextElem + quoteAuthorElem;
    if (contentQuote.length > 280) {
      let charCountAuthor = quoteAuthorElem.length;
      const extraStylingChar = "..." + '"';
      let extraCharCount = extraStylingChar.length;
      let subString =
        quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
        extraStylingChar +
        quoteAuthorElem;
      //generate url available for Twitter intent and inject url on HTML
      twitterLink = "https://twitter.com/intent/tweet?text=" + subString;
    } else {
      //generate url available for Twitter intent and inject url on HTML
      twitterLink = "https://twitter.com/intent/tweet?text=" + contentQuote;
    }
  }

  const random = (array) => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = (array) => {
    return array[random(array)];
  };

  //defining a function to (ultimately) update the Redux state with a new quote. Passing a randomly selected quote via props. Dispatching selectNewQuote() from props and passing in the randomly selected new quote as an argument
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(props.stateQuotes);
    props.selectNewQuote(chosenQuote);
  };

  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI.
  //as a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
  return (
    <React.Fragment>
      {(() => {
        switch (props.stateStatus) {
          case "waiting":
            return <Loading />;
          case "received":
            return <Loading />;
          case "new quote":
            return (
              <React.Fragment>
                <div className="container">
                  <div id="quote-box">
                    {/* //passing data via props to QuoteBox component */}
                    <QuoteBox
                      text={props.currentQuote.quoteText}
                      author={props.currentQuote.quoteAuthor}
                    />
                    <div className="actions">
                      <Button
                        id="new-quote"
                        title="Get New Quote"
                        onClick={chosenRandomQuoteToState}
                      />
                      <TwitterShare link={twitterLink} />
                    </div>
                  </div>
                </div>
                <footer>
                  <ul className="footer-options">
                    <li className="footer-link">
                      <a href="#" className="footer-linktext">
                        Legal
                      </a>
                    </li>
                    <li className="footer-link">
                      <a href="#" className="footer-linktext">
                        Contact Us
                      </a>
                    </li>
                  </ul>
                  <span>
                    © 2019 Developed by Pat Eskinasy. All Rights Reserved.
                  </span>
                </footer>
              </React.Fragment>
            );
        }
      })()}
    </React.Fragment>
  );
};

The code to make the machine tweet (in snippet above inside App) is very much in line with what has been implemented in all previous flavors of this project. In other words, the code here follows the logic implemented in part 1 of this series.

The conditional check for props.currentQuote helps me handle the readiness of the application. This is because I can only access props.currentQuote.quoteText or props.currentQuote.quoteAuthor when props.currentQuote exists (i.e. I can only access properties of the randomly selected quote object when the object has been selected, not before that).

Done. The last random quote machine is shipped. Source code for flavor #11 in Github.

It was fun making this whole series!

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

This was part 11 (the last part!) of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about what is next with Morse Wall, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

Vanilla Js → Redux → React → React Redux

This tiny project was redone 11 times, 11 different ways.

This was really fun to do. Fun little project. All 11 parts of this 11-part series now shipped. pic.twitter.com/MY2oG5jJGb

— Pat's Morse Wall (@morsewall) September 22, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

Part 10 (one before last) of the Making a random quote machine in a few different flavors series in ON.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #9, I’m creating function components in a React app with Hooks and I have the data (quotes) inside a JSON file. In this flavor, I’m using global state management (with Redux) to help me update the different components with the current application state (like in flavor #4), but here I’m using React to build the UI (not manually building the UI with HTML like previously).

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array (this flavor)
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

In Part 11 (to be posted next week - the last part of this series), I will cover an eleventh flavor and will be using Redux Thunk to call an asynchronous endpoint to request the data (quotes) from an external resource (all while still building the UI with React Hooks).

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

Why Redux in a React application?

With Redux, I can simplify the management of the application’s state in a complex app. Simplicity comes out specially from being able to have all app state centralized in a single location (the Redux store).

Although React components can manage their own state locally, without the need of an external library (like in flavor #6 and flavor #8), as applications grow bigger, with several components, managing state that is shared across components becomes a difficult and messy task.

Having said that, as mentioned previously, this app is simple enough that it can be done solely in React. Actually, it is so simple that it can be shipped with essentially 3 lines of functional Vanilla JavaScript code (flavor #1).

Adding the React Redux library

Since Redux is not designed to work with React out of the box, I’m adding the React Redux package to let my React components read data from the Redux store, and dispatch actions to the store to update data.

The React Redux library is available from a precompiled UMD package, so I can simply add it as script to my HTML.

Like previously in flavor #4, I’m adding Redux to the project via a UMD build. The snippet below shows the bottom of my HTML.

<!-- index.html -->
	<!-- adding the React library from a precompiled UMD packages. React is the global variable to call React. -->
	<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
	<!-- Loading the Babel compiler. When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx: -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<!-- adding the Redux library from a precompiled UMD package. window.Redux is the global variable to call Redux. -->
	<script src="https://unpkg.com/redux@4.0.4/dist/redux.js"></script>
	<!-- adding the React Redux library from a precompiled UMD package. ReactRedux is the global variable to call React Redux. -->
	<script src="https://unpkg.com/react-redux@7.1.1/dist/react-redux.min.js"></script>
	<!-- special text/babel MIME type -->
	<script type="text/babel" src="src/script.js"></script>
</body>
</html>

The React Redux UMD build makes React Redux available as a ReactRedux global variable.

No JavaScript modules here (again)

For the reasons I’ve detailed in flavor #6, I’m not dividing this flavor’s code into modules.

In other words, this flavor has a long JS file.

Flavor #10: HTML + CSS + React Hooks + React Redux + quotes array

In this flavor, I’m creating a Redux store that manages the state of the entire app. The React components can then subscribe to the pieces of data in the store that are relevant to them. Actions are dispatched directly from React components. These dispatched actions then ultimately trigger store updates (for more on state, check “What is state?” in flavor #4).

Actually, since much of the Redux code in this flavor remains the same as in flavor #4, it may be helpful to give that writing a quick read.

I have the data (quotes) in an array inside my script.js like previously in flavor #8.

Restructuring the React Components

Before I get into state management, I’m breaking down my large React component into smaller components. Such restructuring makes the application easier to read, maintain and grow [sic] (Because this application has so much growth potential, right?). So, I’m splitting the previously monolithic App React Component (which was large and contained a lot of functionality) into 4 components instead.

Once again, this is a simple app, but for more complex applications, not breaking down large components would make them hard to test and would easily lead to non-DRY code.

Reusable Quote Box

I’m creating a reusable quote box to handle a potential “future case” in which I’m scaling the app [sic] and want to add more screens/routes to it. I’d then reuse the same quote box, but with different text (data). I’m getting author and text values from the App component via props

//script.js
const QuoteBox = ({ text, author }) => {
  //destructuring
  return (
    <React.Fragment>
      <div className="quotable-square">
        <div className="content">
          <div id="text">{text}</div>
          <div id="author" className="author">
            {author}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

Passing props to components

Components can be customized when they are created with different parameters. These parameters are called props (or properties) and they are used in a React application to send data from one React component to another React component. props can be considered as arguments to a function which returns JSX. The value of this “argument” can then be accessed in the function body (variable name within curly braces).

As per code snippet above, I’m getting author and text values from a parent component component. Note that I’m destructuring props by using the destructuring assignment syntax above. This allows me to clearly define my props as they get passed from a parent to a child component and get rid of the props word in the component’s definition.

The parent component (App), as per below code snippet, passes text and author values to the Quotebox component.

In this specific case (of a React Redux application), there is obviously some more to it, since the parent component (App) is having props passed to it. This is because Redux is passing state to App via props (more on this further down). That said, the dynamics of passing data from a parent component to a child component are as simple as per snippet above and below.

//script.js
//defining the function component. Redux state and dispatch are passed to the component as props
const App = props => {
  ...
  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI. As a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
  return (
    <React.Fragment>
      <div className="container">
        <div id="quote-box">
          {/* passing data via props to QuoteBox component */}
          <QuoteBox
            text={props.currentQuote.data.quoteText}
            author={props.currentQuote.data.quoteAuthor}
          />
        </div>
      </div>
      <footer>
        <ul className="footer-options">
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Legal
            </a>
          </li>
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Contact Us
            </a>
          </li>
        </ul>
        <span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
      </footer>
    </React.Fragment>
  );
};

Reusable Button

I’m creating a reusable button to handle a potential “future case” in which I want to have two buttons, instead of having only one “New Quote” button. For instance: one for Next Quote and one for Previous Quote.

// script.js
const Button = ({ onClick, title }) => {
  return (
    <button className="new-quote" onClick={onClick}>
      {title}
    </button>
  );
};

Reusable Share Button

Finally, I’m creating a reusable share button to handle a potential “future case” in which I want to add additional social share buttons, instead of only one “Tweet Quote” button. These buttons would then share the same styling, but receive different props.

//script.js
const TwitterShare = ({ link }) => {
  return (
    <React.Fragment>
      <button className="tweet-quote">
        <a
          href={link}
          target="_blank"
          title="Tweet this on Twitter"
          id="tweet-quote"
        >
          <em className="fab fa-twitter"></em>Tweet Quote
        </a>
      </button>
    </React.Fragment>
  );
};

Redux and initial state

From the user stories, I want to be welcomed by a quote when I first load the app. In other words, I want to be able to read the quote from the Redux store on first page load.

So far, however, I haven’t even set up the Redux store yet.

// script.js
// The UMD build makes Redux available as a window.Redux global variable
const Redux = window.Redux;

//defining initial state
const initialState = {
  data: quotes[Math.floor(Math.random() * quotes.length)],
};

//defining an action type
const NEW_QUOTE = "NEW_QUOTE";

//defining an action creator, which creates the action to select a new quote.  The action creator is a function that returns an action (object that contains information about an action-event that has occurred). It creates the action to add a new quote.
const newQuoteActionCreator = (quoteObject) => {
  return {
    type: NEW_QUOTE,
    payload: quoteObject,
  };
};

//creating a reducer that handles the state for quotes. The redux state is initially set to an empty object. The reducer adds a quote to the object of quotes held in state or return the current state.
const getNextQuoteReducer = (state = initialState, action) => {
  switch (action.type) {
    case NEW_QUOTE:
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
};

//creating the Redux store and passing the reducer to it
const store = Redux.createStore(getNextQuoteReducer);

Nearly all code in the snippet above follows the Redux logic implemented in part 4 of this series - action events section and just like previously, I’m making the initial state (initialState) a selected random quote.

App still can’t read state from the Redux store though. This is because Redux still hasn’t been connected to React and no props are being passed to App yet.

In a Redux application, I’d normally create UI listeners that would dispatch actions to the Redux store. Then, I’d create store listeners which would be called whenever a new state is set in the Redux store. Once again, it may be helpful to give flavor #4 a quick read.

In a React Redux application, however, the execution flow is a bit different.

A visual look into the application’s execution flow

In summary, I’m changing the state in the Redux store with random quotes that get selected as the application runs. Redux updates the store with help from an action creator, a reducer and the React Redux API.

On high-level, data flows in a similar way to part 4 of this series - Execution flow in a Redux application: Different React components, such as the Get New Quote button, trigger state changes in the Redux store (with a new random quote) and a React component next updates the UI with the new state.

In a diagram (more on the React Redux methods further down):

React Redux API

The React Redux package provides an API that allows me to provide React access to the Redux store and the actions it needs to dispatch updates. This API offers two key features: <Provider /> and connect().

I, however, need to specify what state and what actions I want. This is to make sure that each React component will only access the state it needs and actions it should have access to. To achieve this, I’m defining two functions: mapStateToProps and mapDispatchToProps.

mapStateToProps

Defining mapStateToProps:

//script.js
//mapping state to props. Allows me to specify exactly what pieces of the state should the React component have access to. Taking state as argument, it returns an object which maps that state to specific property names. These properties will become accessible to the React component via props
const mapStateToProps = (state) => {
  return {
    currentQuote: state,
  };
};

mapStateToProps is called every time the store state changes. It receives the entire store state and returns an object of data the component needs. It maps that state to specific property names (in this case currentQuote). These properties are then accessible to my React component via props (with the help of connect()).

mapDispatchToProps

Defining mapDispatchToProps:

//script.js
//mapping dispatch to props. Specifying what actions should the React component have access to. Allows me to specify which action creators I need to be able to dispatch. It is used to provide specific action creators to the React components so they can dispatch actions against the Redux store. It returns an object that maps dispatch actions to property names, which become component props. As opposed to mapStateToProps (that returns a piece of state), here each property returns a function that calls dispatch with an action creator and any relevant action data. I have access to this dispatch because it's passed in to mapDispatchToProps() as a parameter when I define the function, just like I've passed state to mapStateToProps(). The object should have a property selectNewQuote set to the dispatch function, which takes a parameter for the new quote to add when it dispatches newQuoteActionCreator().
const mapDispatchToProps = (dispatch) => {
  return {
    selectNewQuote: function (quoteToBeNewQuote) {
      dispatch(newQuoteActionCreator(quoteToBeNewQuote));
    },
  };
};

dispatch is a function of the Redux store. In Redux, I’d call store.dispatch to dispatch an action. This would be, in the Redux case, the only way to trigger a state change.

With React Redux, mapDispatchToProps lets me create functions that dispatch when called. Then, with the help of connect(), I can pass those functions as props to my React component.

mapDispatchToProps receives dispatch and returns an object that maps dispatch actions to specific property names (in this case selectNewQuote, which I will be calling inside my React component further down). These properties are then accessible to my React component via props (through connect()). Each property returns a function that calls dispatch with an action creator (in this casenewQuoteActionCreator) and any relevant action data (here, a randomly selected quote).

connect()

The connect() method from React Redux allows me to map state and dispatch to the props of a React component. It connects a React component to the Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store (with the help of mapStateToProps and mapDispatchToProps).

//script.js
//setting React Redux connect to a constant.
const connect = ReactRedux.connect;

//connecting Redux to React. Mapping state and dispatch to the props of the React component. Container then represents the connected component.
const Container = connect(mapStateToProps, mapDispatchToProps)(App);

<Provider />

In React Redux, connect attempts to get the store from the <Provider />. The <Provider /> wraps my React application. It allows my React app to access the Redux store (providing state) and dispatch function throughout my React component. The Redux store is passed as a prop to <Provider />.

//script.js
//using Provider to connect redux to react. Allows me to provide state and dispatch to React components. Setting React Redux Provider to a constant.
const Provider = ReactRedux.Provider;

//defining the Provider wrapper. Allows me to access the Redux store and dispatch functions. Finalizing connecting the Redux store with the React component, thereby extracting the local state into the Redux store. Provider wraps the React app and allows me to access the Redux store and dispatch actions throughout the React component. The Redux store is passed as a prop to the Provider.
const AppWrapper = () => {
  return (
    <Provider store={store}>
      <Container />
    </Provider>
  );
};

With the above in place, App can now read state from the Redux store and it now becomes clearer why I’ve mentioned further above that the parent component (App) needs props passed to it (because Redux is passing state - and dispatch - to App via props).

By now, my application can render a random quote on the screen upon first page load. And with this, I have shipped the first user story.

React Dispatching Actions

I still need to ship user story #2: I want to be able to click a UI element (a button) to get a new quote. To achieve this, I’ll need to dispatch an action from my React component.

When the Get New Quote button is clicked, React calls chosenRandomQuoteToState, which calls selectNewQuote (see mapDispatchToProps above), as it has been passed as props to App. Now, provided the specific action creator (newQuoteActionCreator, coming from mapDispatchToProps), the React component can dispatch actions against the Redux store and update the state.

//script.js
const App = props => {
  ...
  const random = array => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = array => {
    return array[random(array)];
  };

  //defining a function to (ultimately) update the Redux state with a new quote. Passing a randomly selected quote via props. Dispatching selectNewQuote() from props and passing in the randomly selected new quote as an argument
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(quotes);
    props.selectNewQuote(chosenQuote);
  };

  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI. As a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
  return (
    <React.Fragment>
      <div className="container">
        <div id="quote-box">
          {/* passing data via props to QuoteBox component */}
          <QuoteBox
            text={props.currentQuote.data.quoteText}
            author={props.currentQuote.data.quoteAuthor}
          />
          <div className="actions">
            <Button
              id="new-quote"
              title="Get New Quote"
              onClick={chosenRandomQuoteToState}
            />
          </div>
        </div>
      </div>
      <footer>
        <ul className="footer-options">
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Legal
            </a>
          </li>
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Contact Us
            </a>
          </li>
        </ul>
        <span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
      </footer>
    </React.Fragment>
  );
};

And just like previously (in the case of first page load), App reads state from the Redux store (given Redux is passing state to App via props) and the newly selected random quote will render on the screen.

The GIF below shows state changing in the application as I request a new quote with the Get New Quote button.

As a note, to track state (as per gif above), and as previously done in flavor #4, I use Redux DevTools Extension to time travel in the application’s state. The extension records dispatched actions (more on dispatched actions below in the article) and the state of the Redux store (more on the store further down) at every point in time. This allows me to inspect the state and travel back in time to a previous application state without reloading the page.

Building the UI - The Parent Function Component

Defining App, the function component, now in full:

//script.js
// defining the function component. Redux state and dispatch are passed to the component as props
const App = (props) => {
  //making the machine tweet
  let twitterLink;

  let quoteTextElem = props.currentQuote.data.quoteText;
  let quoteAuthorElem = " - " + props.currentQuote.data.quoteAuthor;
  let contentQuote = quoteTextElem + quoteAuthorElem;
  if (contentQuote.length > 280) {
    let charCountAuthor = quoteAuthorElem.length;
    const extraStylingChar = "..." + '"';
    let extraCharCount = extraStylingChar.length;
    let subString =
      quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
      extraStylingChar +
      quoteAuthorElem;
    //generate url available for Twitter intent and inject url on HTML
    twitterLink = "https://twitter.com/intent/tweet?text=" + subString;
  } else {
    //generate url available for Twitter intent and inject url on HTML
    twitterLink = "https://twitter.com/intent/tweet?text=" + contentQuote;
  }

  const random = (array) => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = (array) => {
    return array[random(array)];
  };

  //defining a function to (ultimately) update the Redux state with a new quote. Passing a randomly selected quote via props. Dispatching selectNewQuote() from props and passing in the randomly selected new quote as an argument
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(quotes);
    props.selectNewQuote(chosenQuote);
  };

  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI. As a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
  return (
    <React.Fragment>
      <div className="container">
        <div id="quote-box">
          {/* passing data via props to QuoteBox component */}
          <QuoteBox
            text={props.currentQuote.data.quoteText}
            author={props.currentQuote.data.quoteAuthor}
          />
          <div className="actions">
            <Button
              id="new-quote"
              title="Get New Quote"
              onClick={chosenRandomQuoteToState}
            />
            <TwitterShare link={twitterLink} />
          </div>
        </div>
      </div>
      <footer>
        <ul className="footer-options">
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Legal
            </a>
          </li>
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Contact Us
            </a>
          </li>
        </ul>
        <span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
      </footer>
    </React.Fragment>
  );
};

The code to make the machine tweet (in snippet above inside App) is very much in line with what has been implemented in all previous flavors of this project. In other words, the code here follows the logic implemented in part 1 of this series.

So now the random quote machine ships all the required user stories!

You can check the project live. Source code for flavor #10 in Github.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 11 (to be posted next week - the last part of this series), I will cover an eleventh flavor and will be using Redux Thunk to call an asynchronous endpoint to request the data (quotes) from an external resource (all while still building the UI with React Hooks).

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

Why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. Reason: Shipping a simple app in a simple environment with fewer moving parts=great way to practice a new way to solve a problem

Part 10 of a 11-part series out pic.twitter.com/WL6hVSOJDE

— Pat's Morse Wall (@morsewall) September 15, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 11 of this series has now been published. Go check it out!. I continue using Redux to help me update the different components with the current application state, but the app is using Redux Thunk to call an asynchronous endpoint as the data (quotes) is requested from an external resource (a JSON stored in a public content delivery network (CDN)) (like in flavor #5). This time, however, I’m using React to build the UI (not manually building the UI with HTML, like previously) in the eleventh (and last) flavor.

This is Part 9 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #8, I’m creating function components in a React app with Hooks and I have the data (quotes) inside an array. In this flavor, the data is inside a JSON file (like in flavor #7), but here I’m creating function components in a React app with Hooks (not using React classes like previously).

This is Part 8 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #7, the app’s UI is built using a User Interface Library (React) and I have the data (quotes) inside a JSON file. In this flavor, the data is inside an array (like in flavor #6), but here I’m creating function components in a React app with Hooks (not using React classes like previously).

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array (this flavor)
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

In Part 9 (to be posted next week), I will cover a ninth flavor and will be calling an asynchronous endpoint to request the data, while still using React Hooks.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

Flavor #8: HTML + CSS + React Hooks + quotes array

I have the data (quotes) in an array inside my script.js like previously in flavor #6.

Actually, since much of the code in this flavor remains the same as in flavor #6, it may be helpful to give that writing a quick read.

Why React Hooks?

React Hooks do not add new features to React, they are a different way of doing the same (not being facetious though, there is obviously strong motivation behind React Hooks).

But if the TLDR according to the React core team is: “There are no plans to remove classes from React”, why make a flavor with React Hooks? Because:

True that…

There are always (at least) two ways to solve a problem. One is faster, the other you just don’t know yet.

The above is the spirit behind the Making a random quote machine in a few different flavors series. And with that in mind, there is no better way to practice a new way to solve a problem than to ship a simple app in a simpler environment with fewer moving parts. Enjoy!

Quick note: React is moving on. It is possible that in the future, class support might move into a separate package.

One function component

I’ll be incrementally expanding one function component throughout this write-up. This component selects a quote from the quotes array, it then sets this quote in the component’s internal state (for more on state, check “What is state?” in flavor #4) and lastly, renders the quote in the HTML.

“Function components” in React come with React Hooks and were previously known as “stateless functional components”. These components did not contain their own state previously, but with React Hooks they are now able to have their own state.

Defining App, the function component:

// script.js
//defining the function component.
const App = () => {};

I’m designing App to select a random quote, set the quote in the component’s internal state and lastly render the quote in the HTML.

Firstly, I’m lazily initializing the quote state variable to the value returned by quotes[Math.floor(Math.random() * quotes.length)]. I do this by calling the useState Hook (more on what’s a Hook further down) inside the component.

This initial state is used during the initial render. In subsequent renders, it is disregarded. The function I’m passing to useState will be executed only on the initial render.

// script.js
//defining the function component.
const App = () => {
  const quoteState = useState(() => {
    return quotes[Math.floor(Math.random() * quotes.length)];
  });
  const quote = quoteState[0]; // Contains the value returned by function passed to `useState`
  const setQuote = quoteState[1]; // It’s a function
};

Simplifying the above with array destructuring:

// script.js
//defining the function component.
const App = () => {
  //using a function to lazy initialize the initial state
  const [quote, setQuote] = React.useState(() => {
    return quotes[Math.floor(Math.random() * quotes.length)];
  });
};

The useState Hook returns two values (an array with two items): the first item is the current state and the second is a function that allows me to update the state.

A Hook is a special function that allows me to “hook into” React features. useState is a Hook that lets me add React state to function components.

Previously, whenever I had to add state to a stateless functional component, I had to convert it to a class. Now I can simply use a Hook inside the component.

The component’s state

With the code so far, I’m setting the initial random quote in the component’s state, but have not fully shipped the full “I want to be welcomed by a quote when I first load the app” user story since I have not made the component render yet. My page is still empty.

Updating the state

Before I move into rendering, I’m defining a function (chosenRandomQuoteToState) to update the state with a new quote. This will allow me to handle the second user stories: “I want to be able to click a UI element (a button) to get a new quote”.

// index.js
const App = () => {
  //using a function to lazy initialize the initial state
  const [quote, setQuote] = React.useState(() => {
    return quotes[Math.floor(Math.random() * quotes.length)];
  });

  const random = (array) => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = (array) => {
    return array[random(array)];
  };

  //defining a function to update the state with a new quote
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(quotes);
    setQuote(chosenQuote);
  };
};

I’ve made the decision to write the non-DRY code above (I’m repeating myself when defining random and randomQuoteFunction as these functions had already been written when passed to useState as lazy initial state) since, as per the Rules of Hooks, I should only call Hooks at the top level of a React function component.

The nice thing with this rule, is that it ensures (beyond other things) that all stateful logic in a component is clearly visible when one reads the code.

As per code snippet above, I’m updating the state by calling setQuote, the function that allows me to update the state.

My page is still empty though, the component does not return any JSX yet. Time to build the UI and attach the necessary event handlers.

Building the UI

The button element below has an onClick() handler. This handler is triggered when the button receives a click event in the browser and runs the chosenRandomQuoteToState function defined previously.

chosenRandomQuoteToState then updates the state with a new random quote by calling setCount. React will then re-render the App component, passing the new quote value to it (rendering quote.quoteText and quote.quoteAuthor as the quote text and the quote author respectively).

//defining the function component.
const App = () => {
  const [quote, setQuote] = React.useState("");

  const random = (array) => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = (array) => {
    return array[random(array)];
  };

  //defining a function to update the state with a new quote
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(quotes);
    setQuote(chosenQuote);
  };

  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI.
  return (
    //as a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
    <React.Fragment>
      <div className="container">
        <div id="quote-box">
          <div className="quotable-square">
            <div className="content">
              <div id="text">{quote.quoteText}</div>
              <div id="author" className="author">
                {quote.quoteAuthor}
              </div>
            </div>
          </div>
          <div className="actions">
            <button
              id="new-quote"
              className="new-quote"
              onClick={chosenRandomQuoteToState}
            >
              Get New Quote
            </button>
            <button className="tweet-quote">
              <a id="tweet-quote" href={twitterLink} target="_blank">
                <em className="fab fa-twitter"></em>Tweet Quote
              </a>
            </button>
          </div>
        </div>
      </div>
      <footer>
        <ul className="footer-options">
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Legal
            </a>
          </li>
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Contact Us
            </a>
          </li>
        </ul>
        <span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
      </footer>
    </React.Fragment>
  );
};

With the code so far I’m shipping both the first and the second user stories!

Making the machine tweet

The logic to invoke Twitter Web Intents is, however, still missing (allowing me to ship the last user story: “I want to be able to share on Twitter the quote the random quote machine gives me so that I can share my source of inspiration with the world”), so here it comes:

// script.js

//defining the function component.
const App = () => {
  ...
//making the machine tweet
  let twitterLink;
  let quoteTextElem = quote.quoteText;
  let quoteAuthorElem = " - " + quote.quoteAuthor;
  let contentQuote = quoteTextElem + quoteAuthorElem;
  if (contentQuote.length > 280) {
    let charCountAuthor = quoteAuthorElem.length;
    const extraStylingChar = "..." + '"';
    let extraCharCount = extraStylingChar.length;
    let subString =
      quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
      extraStylingChar +
      quoteAuthorElem;
    //generate url available for Twitter intent and inject url on HTML
    twitterLink = "https://twitter.com/intent/tweet?text=" + subString;
  } else {
    //generate url available for Twitter intent and inject url on HTML
    twitterLink = "https://twitter.com/intent/tweet?text=" + contentQuote;
  }
  return (
  ...
  )
}

The above code to make the machine tweet is very much in line with what has been implemented in all previous flavors of this project. In other words, the code here follows the logic implemented in part 1 of this series.

This is pretty much it. The rest of the code remains the same as in flavor #6.

You can check the project live. Source code for flavor #8 in Github.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 9 (to be posted next week), I will cover a ninth flavor and will be calling an asynchronous endpoint to request the data, while still using React Hooks.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

Whoop Whoop! You can now follow the write up on how to rewrite your React-powered random quote machine with React Hooks pic.twitter.com/fDCQaa1pDA

— Pat's Morse Wall (@morsewall) September 1, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 9 of this series has now been published. Go check it out! The data is inside a JSON file (like in flavor #7) but I’m creating function components in a React app with Hooks (not using React classes like previously) in the ninth flavor.

This is Part 7 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #6, the app’s UI is built using a User Interface Library (React) and I have the data (quotes) inside an array. In this flavor, I’m still using React but the app calls an asynchronous endpoint to request the data.

This is Part 6 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #5, the different UI elements are updated using state management with Redux using a middleware as the app calls an asynchronous endpoint.

In this flavor, I use a User Interface Javascript library (React) to build the app’s UI.

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array (this flavor)
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

In Part 7 (to be posted next week), I will cover a seventh flavor and will be calling an asynchronous endpoint to request the data, while still using React.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

Adding the React library

The React library is available from a precompiled UMD package, so I can simply add it as script to my HTML. The snippet below shows the bottom of my HTML.

<!-- index.html -->
	<!-- adding the React library from a precompiled UMD packages. React is the global variable to call React. -->
	<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
	<!-- Loading the Babel compiler. When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx: -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<!-- special text/babel MIME type -->
	<script type="text/babel" src="src/script.js"></script>
</body>
</html>

As normal script elements pass minimal information for scripts served from CDNs, I’m passing crossorigin as an attribute to <script> to allow me to get real error logging.

I’m also adding the ReactDOM library as it adds specific methods that allow me to use React for web development, i.e. render to the browser (React is, otherwise, independent from the browser and can be used outside of it, e.g. on mobile devices with React Native).

With React I’m essentially writing HTML in JavaScript. React uses a syntax extension called JSX to enable that (React without JSX is, in my opinion, less readable). But because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. I’m setting up compilation with Babel (served from a CDN as per my code snippet above).

Babel automatically compiles and executes all script tags with type text/babel or text/jsx. So, as per snippet above, I’m loading script.js with type text/babel.

No JavaScript modules here

Babel does not, however, perform client-side transpiling of modules. In fact, unless I’d use a plugin, Babel transforms import into require(), which means that at some point I’d get require is not defined on my browser console should I try to use import statements inside Babel-transpiled scripts.

I’d be able to work around this with JavaScript modules applied via script tag <script type="module"> (like I’ve done previously), but for the following reasons I’m not dividing this code into modules like I’ve done previously in flavor #4 and flavor #5:

• I cannot add a second type (type=module) attribute to the script tag
• I cannot use another script tag attribute (e.g. data attribute) to tell Babel to compile my script (hello, @Babel?)
• I’m not willing to use a pre-compiled module bundler like webpack (this is a simple project)

In other words, this flavor has a long JS file.

Flavor #6: HTML + CSS + React + quotes array

Like previously in flavor #1, I have the data (quotes) in an array inside my script.js. There are only 3 quotes in the code snippet below (so I can illustrate the point), but many more quotes in the array in production.

/ script.js
//defining an array for the quotes
const quotes = [
  {
    quoteText:
      '"Many of you appear concerned that we are wasting valuable lesson time, but I assure you we will go back to school the moment you start listening to science and give us a future."',
    quoteAuthor: "@GretaThunberg",
  },
  {
    quoteText:
      '"I was fortunate to be born in a time and place where everyone told us to dream big. I could become whatever I wanted to. I could live wherever I wanted to. People like me had everything we needed and more. Things our grandparents could not even dream of. We had everything we could ever wish for and yet now we may have nothing. Now we probably don’t even have a future any more."',
    quoteAuthor: "@GretaThunberg",
  },
  {
    quoteText:
      '"That future was sold so that a small number of people could make unimaginable amounts of money. It was stolen from us every time you said that the sky was the limit, and that you only live once. You lied to us. You gave us false hope. You told us that the future was something to look forward to."',
    quoteAuthor: "@GretaThunberg",
  },
];

One stateful component

I’ll be incrementally expanding one stateful component throughout this write-up. This component selects a quote from the quotes array, it then sets this quote in the component’s internal state (for more on state, check “What is state?” in flavor #4) and lastly, renders the quote in the HTML.

Covering what is on my HTML, this is all there is to it now when it comes to <div>s (as always, you can check the full source code in the repo. Also linked at the bottom of this write-up):

<!-- index.html -->
<div id="app"></div>

I’m adding an empty <div> tag to mark the spot where I want to display with React.

I’m giving the <div> a unique id HTML attribute. This allows me to find it from the JavaScript code and display a React component inside of it.

React has it’s own representation of the DOM. React then uses snapshots of its own DOM to update only specific parts of the DOM. This helps the browser use less resources when changes need to be done on a page.

Back to JavaScript, ReactDOM.render(componentToRender, targetNode) places the JSX into React’s own DOM. In this project (the snippet below shows the bottom of my script.js):

// script.js
ReactDOM.render(<App />, document.getElementById("app"));

componentToRender here is App, the React component to be rendered (when React encounters a custom HMTL tag that references a component - a component name wrapped in < /> in this case - , it renders the markup for the component in the location of the tag) and targetNode is the DOM node that the component shall be rendered to.

Before that though, I need to define App (the stateful component):

// script.js
class App extends React.Component {
  constructor(props) {
    super(props);
  }
}

This creates the JavaScript class App that extends the React.Component class. With this, App can now access React features.

The App class has a constructor defined within it that calls super(). It uses super() to call the constructor of the parent class, in this case React.Component. The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component’s constructor with super, and pass props to both. This makes sure the component is initialized properly.

As per my user stories: “I want to be welcomed by a quote when I first load the app”. So far, however, I haven’t even selected the random quote yet. So, doing that now:

// index.js
class App extends React.Component {
  constructor(props) {
    super(props);
    let quote = this.randomQuoteFunction(quotes);
    this.state = {
      quoteTextChosen: quote.quoteText,
      quoteAuthorChosen: quote.quoteAuthor,
    };
  }
  random(array) {
    return Math.floor(Math.random() * array.length);
  }

  randomQuoteFunction(array) {
    return array[this.random(array)];
  }
}

From the above, I’m defining the component initial state, allowing the app to display any part of it in the UI that is rendered (more on rendering further down).

The component’s state

As mentioned above, App, the React component is designed to select a random quote, set the quote in the component’s internal state and lastly render the quote in the HTML.

I still need to bind this to the two class methods previously defined (random and randomQuoteFunction) in the constructor. This way the class methods can use this to access properties on the class (such as state) inside the scope of the method and I won’t get undefined on my browser console when calling functions like this.randomQuotes(quotes).

// script.js
class App extends React.Component {
  constructor(props) {
    super(props);
    this.random = this.random.bind(this);
    this.randomQuoteFunction = this.randomQuoteFunction.bind(this);
    let quote = this.randomQuoteFunction(quotes);
    this.state = {
      quoteTextChosen: quote.quoteText,
      quoteAuthorChosen: quote.quoteAuthor,
    };
  }
  random(array) {
    return Math.floor(Math.random() * array.length);
  }

  randomQuoteFunction(array) {
    return array[this.random(array)];
  }
}

With the code so far I’m setting the random quote in the component’s state, but have not fully shipped the full “I want to be welcomed by a quote when I first load the app” user story since I have not made the component render yet. My page is still empty.

Updating the state

Before I move into rendering, I’m defining a new class method (chosenRandomQuoteToState) to update the state with a new quote. This will allow me to handle the second user story: “I want to be able to click a UI element (a button) to get a new quote”.

// script.js
class App extends React.Component {
  constructor(props) {
    super(props);
    this.random = this.random.bind(this);
    this.randomQuoteFunction = this.randomQuoteFunction.bind(this);
    this.chosenRandomQuoteToState = this.chosenRandomQuoteToState.bind(this);
    let quote = this.randomQuoteFunction(quotes);
    this.state = {
      quoteTextChosen: quote.quoteText,
      quoteAuthorChosen: quote.quoteAuthor,
    };
  }
  random(array) {
    return Math.floor(Math.random() * array.length);
  }

  randomQuoteFunction(array) {
    return array[this.random(array)];
  }

  chosenRandomQuoteToState() {
    let newQuote = this.randomQuoteFunction(quotes);
    this.setState({
      quoteTextChosen: newQuote.quoteText,
      quoteAuthorChosen: newQuote.quoteAuthor,
    });
  }
}

Like I’ve done with the previously defined class methods, I’m binding this to chosenRandomQuoteToState in the constructor.

From above, when defining chosenRandomQuoteToState, I’m updating the component’s state with React’s setState method. To update the state I pass in an object with key-value pairs to this.setState(). They keys are the state properties and the values are the updated state data.

Rendering the component

Time to render the component. The component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI.

In JSX I can no longer use the world class to define HTML classes since class is a reserved word in JavaScript. JSX uses className instead. Furthermore, the naming convention for HTML attributes and event references in JSX become camelCase, so a click event is onClick, instead of onclick.

The button element has an onClick() handler. This handler is triggered when the button receives a click event in the browser and runs the chosenRandomQuoteToState method defined previously.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.random = this.random.bind(this);
    this.randomQuoteFunction = this.randomQuoteFunction.bind(this);
    this.chosenRandomQuoteToState = this.chosenRandomQuoteToState.bind(this);
    let quote = this.randomQuoteFunction(quotes);
    this.state = {
      quoteTextChosen: quote.quoteText,
      quoteAuthorChosen: quote.quoteAuthor,
    };
  }
  random(array) {
    return Math.floor(Math.random() * array.length);
  }

  randomQuoteFunction(array) {
    return array[this.random(array)];
  }

  chosenRandomQuoteToState() {
    let newQuote = this.randomQuoteFunction(quotes);
    this.setState({
      quoteTextChosen: newQuote.quoteText,
      quoteAuthorChosen: newQuote.quoteAuthor,
    });
  }

  render() {
    let twitterLink;
    return (
      <React.Fragment>
        <div className="container">
          <div id="quote-box">
            <div className="quotable-square">
              <div className="content">
                <div id="text">{this.state.quoteTextChosen}</div>
                <div id="author" className="author">
                  {this.state.quoteAuthorChosen}
                </div>
              </div>
            </div>
            <div className="actions">
              <button
                id="new-quote"
                className="new-quote"
                onClick={this.chosenRandomQuoteToState}
              >
                Get New Quote
              </button>
              <button className="tweet-quote">
                <a id="tweet-quote" href={twitterLink} target="_blank">
                  <em className="fab fa-twitter"></em>Tweet Quote
                </a>
              </button>
            </div>
          </div>
        </div>
        <footer>
          <ul className="footer-options">
            <li className="footer-link">
              <a href="#" className="footer-linktext">
                Legal
              </a>
            </li>
            <li className="footer-link">
              <a href="#" className="footer-linktext">
                Contact Us
              </a>
            </li>
          </ul>
          <span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
        </footer>
      </React.Fragment>
    );
  }
}

As a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM. React.Fragment outputs no HTML element (it is an invisible HTML tag).

Any code to be treated as JavaScript comes within curly braces in JSX. So, as I access a state value within the return of the render method, I have to enclose the value in curly braces, e.g. {this.state.quoteTextChosen}.

Since this component is stateful, it has access to the data in state in its render() method. React uses a virtual DOM to keep track of changes in state behind the scenes. When state data update changes, React triggers a re-render of the component using the data. React then updates the actual DOM, but only when necessary.

Making the machine tweet

The logic to invoke Twitter Web Intents is still missing (allowing me to ship the last user story: “I want to be able to share on Twitter the quote the random quote machine gives me so that I can share my source of inspiration with the world”), so here it comes:

// script.js
render() {
    let twitterLink;
    let quoteTextElem = this.state.quoteTextChosen;
    let quoteAuthorElem = " - " + this.state.quoteAuthorChosen;
    let contentQuote = quoteTextElem + quoteAuthorElem;
    if (contentQuote.length > 280) {
      let charCountAuthor = quoteAuthorElem.length;
      const extraStylingChar = "..." + '"';
      let extraCharCount = extraStylingChar.length;
      let subString =
        quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
        extraStylingChar +
        quoteAuthorElem;
      //generate url available for Twitter intent and inject url on HTML
      twitterLink = "https://twitter.com/intent/tweet?text=" + subString;
    } else {
      //generate url available for Twitter intent and inject url on HTML
      twitterLink = "https://twitter.com/intent/tweet?text=" + contentQuote;
    }
    return (
      ...
    )
}

The JavaScript code (above return), dealing with making the machine tweet is very much in line with what has been implemented in all previous flavors of this project. In other words, the code here follows the logic implemented in part 1 of this series.

So now the random quote machine ships all the required user stories!

You can check the project live. Source code for flavor #6 in Github.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 7 (to be posted next week), I will cover a seventh flavor and will be calling an asynchronous endpoint to request the data, while still using React.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

Of course you need one more tutorial on how to build a random quote machine with React 🙌

My tutorial covers 11 different ways on how to build a random quote machine though (not only with React) (Ha!) pic.twitter.com/GQdB1lsIR9

— Pat's Morse Wall (@morsewall) August 18, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 7 of this series has now been published. Go check it out! I’m still using React but the app calls an asynchronous endpoint to request the data in the seventh flavor.

Here comes Part 5 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #4, the different UI elements are updated using state management with Redux.

In this flavor, I continue updating the different UI elements with the current application state, but the app is calling an asynchronous endpoint as the data (quotes) is requested from an external resource (a JSON stored in a public content delivery network (CDN)).

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes (this flavor)
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

In Part 6 (to be posted next week), I will cover a sixth flavor and will be using a User Interface JavaScript library (React) to build the app’s UI.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

Flavor #5: HTML + CSS + Redux + JSON with quotes

Like previously in flavor #2, I’m storing the quotes in a separate JSON file. This time I’m storing it in jsDelivr, a public CDN.

There is a limited number of quotes from the JSON in the code snippet below (so I can illustrate the point), but many more quotes in the JSON in production.

{
  "quotes": [
    {
      "quoteText": "\"Many of you appear concerned that we are wasting valuable lesson time, but I assure you we will go back to school the moment you start listening to science and give us a future.\"",
      "quoteAuthor": "@GretaThunberg"
    },
    {
      "quoteText": "\"I was fortunate to be born in a time and place where everyone told us to dream big. I could become whatever I wanted to. I could live wherever I wanted to. People like me had everything we needed and more. Things our grandparents could not even dream of. We had everything we could ever wish for and yet now we may have nothing. Now we probably don’t even have a future any more.\"",
      "quoteAuthor": "@GretaThunberg"
    },
    {
      "quoteText": "\"That future was sold so that a small number of people could make unimaginable amounts of money. It was stolen from us every time you said that the sky was the limit, and that you only live once. You lied to us. You gave us false hope. You told us that the future was something to look forward to.\"",
      "quoteAuthor": "@GretaThunberg"
    }
  ]
}

Calling asynchronous endpoints in Redux

Since I’m hitting asynchronous endpoints I need to adjust my code to make sure things will happen in order. I need to make sure the code will only try to render the quote when I have the data available, i.e. after I’ve finished fetching the data from the JSON file. This is of course necessary even when dealing with Vanilla JavaScript code like in flavor #2. The additional challenge in this flavor (with Redux) is that, by default, actions in Redux are dispatched synchronously. To help with this, I am using the Redux Thunk middleware. Redux Thunk is a middleman that sits in between an action being dispatched and the action reaching the reducer (for more on actions and reducers, check flavor #4).

The concept of a thunk comes from computer programming and more widely refers to using a function to delay the evaluation/running of an operation.

To create an asynchronous action, I return a function in an action creator that takes dispatch as an argument. Within this function, I can dispatch actions and perform asynchronous requests.

//handleAsync.js
import { requestingApiData } from "../../redux/actions/actions.js";
import { receivedApiData } from "../../redux/actions/actions.js";
import { store } from "../index.js";

// defining a special action creator that returns a function. The returned function takes dispatch as an argument. Within this function, I can dispatch actions and perform asynchronous requests. It's common to dispatch an action before initiating any asynchronous behavior so that the application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once the application receives the data, another action is dispatched, an action that carries the data as a payload along with information that the action is completed.
const handleAsync = () => {
  return function (dispatch) {
    // dispatch request action here
    store.dispatch(requestingApiData());
    const makeRequest = async () => {
      const responseJSON = await fetch(
        "https://cdn.jsdelivr.net/gh/morsewall/jsondb@master/db.json"
      );
      const responseObject = await responseJSON.json();
      const quotesArray = responseObject.quotes;
      // dispatch received data action here
      store.dispatch(receivedApiData(quotesArray));
    };
    makeRequest();
  };
};

export default handleAsync;

In this case, the asynchronous request is fetch() (just like in flavor #2). Above is the special action creator designed to handle the asynchronous behavior. This is a special action creator since it returns a function instead of an action object (handleAsync returns a function). The returned function takes dispatch as an argument. It is within this function that I can dispatch actions and perform asynchronous requests.

It’s common to dispatch an action before initiating any asynchronous behavior so that the application knows that some data is being requested (this state could for instance display "Loading..." on the console). Then, once the application receives the data, another action is dispatched, this action carries the data as payload along with information that the action is completed.

The two dispatched action creators above (requestingApiData and receivedApiData) are defined in actions.js. They return actions containing information about action-events that have occurred. RECEIVED_API_DATA is tied to having received the data from a finalized fetch() and gives the apiData value a key named payloadQuotes.

//actions.js
import { REQUESTING_API_DATA } from "../constants/constants.js";
import { RECEIVED_API_DATA } from "../constants/constants.js";

// defining action creators related to the asynch function. Action creator is a function that returns an action (object that contains information about an action-event that has occurred). The action creator gets called by `dispatch()`
export const requestingApiData = () => {
  return {
    type: REQUESTING_API_DATA,
  };
};

export const receivedApiData = (apiData) => {
  return {
    type: RECEIVED_API_DATA,
    payloadQuotes: apiData,
  };
};

I’m defining those action types in constants.js.

//constants.js
// defining action types for the special asynch action creator-type function
export const REQUESTING_API_DATA = "REQUESTING_API_DATA";
export const RECEIVED_API_DATA = "RECEIVED_API_DATA";

When the action creators are called it is time for the reducer to make sense of the type of action and inform the Redux store how to respond to the action (i.e. telling the store how to modify the state).

//reducers.js
import { REQUESTING_API_DATA } from "../constants/constants.js";
import { RECEIVED_API_DATA } from "../constants/constants.js";

// defining default state
const defaultState = {
  status: "",
  quotesData: [],
};

//defining reducer functions to allow the Redux store to know how to respond to the action created
const getNextQuoteReducer = (state = defaultState, action) => {
  switch (action.type) {
    case REQUESTING_API_DATA:
      return {
        ...state,
        status: "waiting",
        quotesData: [],
      };
    case RECEIVED_API_DATA:
      return {
        ...state,
        status: "received",
        quotesData: action.payloadQuotes,
      };
    default:
      return state;
  }
};

export default getNextQuoteReducer;

Fetching the data

As per my user stories: “I want to be welcomed by a quote when I first load the app”. So far, however, I haven’t even fetched the quotes from the JSON yet. So, doing that now:

//index.js
"use strict";

import handleAsync from "./js-modules/handleAsync.js";

// The UMD build makes Redux available as a window.Redux global variable
const Redux = window.Redux;

//dispatching the asynch special action creator
store.dispatch(handleAsync());

From the above, I’m dispatching the handleAsync action creator, which will trigger an update of the state in the Redux store with the help of the reducer. When the app has finalized fetching, the Redux store will keep the full JSON contents stored in the state.

Adding the Redux Thunk library

I’m soon calling the Redux Thunk middleware, so I better add it to the project. The Redux Thunk library is available from a precompiled UMD package, so I can simply add it as script to my HTML. The snippet below shows the bottom of my HTML.

<!-- index.html -->
  </footer>
	<!-- adding the Redux library from a precompiled UMD package. window.Redux is the global variable to call Redux. -->
	<script src="https://unpkg.com/redux@4.0.4/dist/redux.js"></script>
	<!-- adding the Redux Thunk library from a precompiled UMD package. window.ReduxThunk.default is the global variable to call Redux Thunk. -->
	<script src="https://unpkg.com/redux-thunk@2.3.0/dist/redux-thunk.min.js"></script>
	<script type="module" src="src/js/index.js"></script>
</body>
</html

With the library added, the UMD build makes Redux Thunk available as a window.ReduxThunk.default global variable. I’m calling that global variable ReduxThunk, so I can simply call the library by ReduxThunk from now on.

//index.js
// The UMD build makes Redux-Thunk available as a window.ReduxThunk.default global variable
const ReduxThunk = window.ReduxThunk.default;

Creating the Redux store when using the Redux Thunk middleware

I still need to create the Redux store. The createStore() method takes as arguments:

• The getNextQuoteReducer reducer function
• Redux.applyMiddleware(ReduxThunk)
• Redux DevTool’s store enhancer (Optional. For more on Redux DevTools extension, see flavor #4)

//index.js
"use strict";

import getNextQuoteReducer from "../redux/reducers/reducers.js";
import handleAsync from "./js-modules/handleAsync.js";

// The UMD build makes Redux available as a window.Redux global variable
const Redux = window.Redux;

// The UMD build makes Redux-Thunk available as a window.ReduxThunk.default global variable
const ReduxThunk = window.ReduxThunk.default;

//to add Chrome's Redux DevTool's extension https://github.com/zalmoxisus/redux-devtools-extension that allows me to go back in the state history. When the extension is not installed, I'm using Redux’s compose.
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || Redux.compose;

//creating the Redux store, including Redux Thunk middleware. This is where the state lives.
export const store = Redux.createStore(
  getNextQuoteReducer,
  composeEnhancers(Redux.applyMiddleware(ReduxThunk))
);

//dispatching the asynch special action creator
store.dispatch(handleAsync());

With Redux Thunk middleware now added, action creators, receiving dispatch as an argument, can call dispatch asynchronously and take control by dispatching functions.

Designing for one batch endpoint call versus multiple endpoint calls

I now have the full JSON (of quotes) in the Redux Store. I however only need one (randomly selected) quote to render in the UI. I could design the app to do one endpoint call (fetch()) every time a new quote was needed, but that would mean using network resources every time a new quote was requested.

Deciding whether to duplicate data in the Redux store

As the Redux store has the full JSON of quotes, I could use the store as a database and use Redux selectors (a selector is a function that accepts Redux state as an argument and returns data that is derived from that state) to do SELECT-type queries called by UI listeners (e.g. through click events). For this application this would mean using a Redux selector to randomly pick a quote from the store.

I’m duplicating data in the Redux store instead. In other words, I’m making the Redux store hold the currently randomly selected quote in addition to the full JSON of quotes. And the reason for that decision is: I want to allow any store listener to getState() and consistently get the current quote that has been randomly selected.

So, the Redux store stores:

• The full JSON of quotes
• The randomly chosen quote object

Alternatively, I could store the index for the quote object in the Redux store. That would similarly allow me to getState() and arrive at the same quote object without fully duplicating the data.

Working through the user stories

Once again, back to the user stories: “I want to be welcomed by a quote when I first load the app” and “I want to be able to click a UI element (a button) to get a new quote”.

Like in flavor #4, I’m naming the UI elements to make them more readable throughout the code:

//index.js
//defining UI elements
const newQuoteButton = document.getElementById("new-quote");
const quoteTextContent = document.getElementById("text");
const quoteAuthorContent = document.getElementById("author");
export const tweetButton = document.getElementById("tweet-quote");

I’m now creating a store listener function which is called whenever an action is dispatched to the store. I then retrieve the state with the getState() method and render my UI elements with data from the state.

//index.js
//creating store listener function that is called whenever an action is dispatched to the store. The getState() method retrieves the current state held in the Redux store
store.subscribe(() => {
  const state = store.getState();
  if (state.status == "waiting") {
    console.log("Loading…");
  }
  if (state.status == "received") {
    let quoteObject = getRandomElementSelector(state);
    //inject random quote on HTML
    quoteTextContent.innerHTML = quoteObject.quoteText;
    //inject author on HTML
    quoteAuthorContent.innerHTML = "- " + quoteObject.quoteAuthor;
    //calling the JS module that generates a Twitter url for Twitter intent
    getTwitterUrl(quoteObject);
  }
});

The getRandomElementSelector above is a Redux selector. I’ve implemented it to take stateObject (state as per above snippet when the selector is called) as argument and return a randomly selected quote object.

//selectors.js
//defining a Redux selector,  i.e. it will be used to take Redux state as an argument and return some data from it
const getRandomElementSelector = (stateObject) => {
  let array = stateObject.quotesData;
  //access random quote from array
  return array[Math.floor(Math.random() * array.length)];
};

export default getRandomElementSelector;

The getTwitterUrl called inside the store listener further above, handles truncating the quote text to the adequate tweetable number of characters, generates the url for the Tweet Quote button and sets the url on the HTML. Below code is as per flavor #4.

//getTwitterUrl.js
import { tweetButton } from "../index.js";

//defining function that generates a Twitter URL (for Twitter intent) and inject url on HTML, making it a JS function/module
const getTwitterUrl = (quoteObject) => {
  //truncating quote text in case full tweet gets to be over 280 characters
  let quoteTextElem = quoteObject.quoteText;
  let quoteAuthorElem = " - " + quoteObject.quoteAuthor;
  let contentQuote = quoteTextElem + quoteAuthorElem;
  if (contentQuote.length > 280) {
    let charCountAuthor = quoteAuthorElem.length;
    const extraStylingChar = "..." + '"';
    let extraCharCount = extraStylingChar.length;
    let subString =
      quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
      extraStylingChar +
      quoteAuthorElem;
    //generate url available for Twitter intent and inject url on HTML
    tweetButton.href = "https://twitter.com/intent/tweet?text=" + subString;
  } else {
    //generate url available for Twitter intent and inject url on HTML
    tweetButton.href = "https://twitter.com/intent/tweet?text=" + contentQuote;
  }
};

export default getTwitterUrl;

With the code so far I’m shipping the “I want to be welcomed by a quote when I first load the app” user story, but “I want to be able to click a UI element (a button) to get a new quote” has not been implemented yet.

I’m starting with the UI listener function tied to the newQuoteButton. This function will be dispatching actions via the newQuoteActionCreator action creator to the Redux store when a click event happens. I’m implementing this new action creator to trigger the storing of the randomly chosen quote object in the Redux store as mentioned above.

//index.js
//creating UI listeners. Dispatching actions (via the action creators that return a "type" to the reducer) to the redux store. When a new state is set in the Redux store, the store listeners will be retrieving the current state held in the Redux store
newQuoteButton.addEventListener("click", () => {
  store.dispatch(newQuoteActionCreator());
});

A new action creator

So, when newQuoteActionCreator is called, it returns an action (which has an informative type). Inside the returned action/object, I’m naming payloadQuote the key that will be associated with the object that will store the selected random quote. The selected random quote, like previously, is chosen by getRandomElementSelector, the selector function.

This is actions.js in full, including newQuoteActionCreator:

//actions.js
import { NEW_QUOTE } from "../constants/constants.js";
import { REQUESTING_API_DATA } from "../constants/constants.js";
import { RECEIVED_API_DATA } from "../constants/constants.js";
import getRandomElementSelector from "../selectors/selectors.js";
import { store } from "../../js/index.js";

// defining action creators related to the asynch function. Action creator is a function that returns an action (object that contains information about an action-event that has occurred). The action creator gets called by `dispatch()`
export const requestingApiData = () => {
  return {
    type: REQUESTING_API_DATA,
  };
};

export const receivedApiData = (apiData) => {
  return {
    type: RECEIVED_API_DATA,
    payloadQuotes: apiData,
  };
};

//defining action creator related to the "Get New Quote" button. a function that returns an action (object that contains information about an action-event that has occurred). The action creator gets called by `dispatch()`
export const newQuoteActionCreator = () => {
  const state = store.getState();
  let quoteObject = getRandomElementSelector(state);
  return {
    type: NEW_QUOTE,
    payloadQuote: quoteObject,
  };
};

The reducer then makes sense of the type and informs the Redux store how to respond to the action. In other words, the reducer tells the Redux store how to modify the state.

reducers.js now in full, including the NEW_QUOTE case:

//reducers.js
import { NEW_QUOTE } from "../constants/constants.js";
import { REQUESTING_API_DATA } from "../constants/constants.js";
import { RECEIVED_API_DATA } from "../constants/constants.js";

// defining default state
const defaultState = {
  status: "",
  quotesData: [],
};

//defining reducer functions to allow the Redux store to know how to respond to the action created
const getNextQuoteReducer = (state = defaultState, action) => {
  switch (action.type) {
    case REQUESTING_API_DATA:
      return {
        ...state,
        status: "waiting",
        quotesData: [],
      };
    case RECEIVED_API_DATA:
      return {
        ...state,
        status: "received",
        quotesData: action.payloadQuotes,
      };
    case NEW_QUOTE:
      return {
        ...state,
        status: "new quote",
        data: action.payloadQuote,
      };
    default:
      return state;
  }
};

export default getNextQuoteReducer;

The new state object has a new property: data and this property has value equal to the object associated with payloadQuote (see newQuoteActionCreator).

I now need to adjust the store listener to render a new quote whenever a new randomly selected quote is added to the store. Here I’m adding an if statement to handle any changes to store when state.status is equal to new quote.

//creating store listener function that is called whenever an action is dispatched to the store. The getState() method retrieves the current state held in the Redux store
store.subscribe(() => {
  const state = store.getState();
  if (state.status == "waiting") {
    console.log("Loading…");
  }
  if (state.status == "received") {
    let quoteObject = getRandomElementSelector(state);
    //inject random quote on HTML
    quoteTextContent.innerHTML = quoteObject.quoteText;
    //inject author on HTML
    quoteAuthorContent.innerHTML = "- " + quoteObject.quoteAuthor;
    //calling the JS module that generates a Twitter url for Twitter intent
    getTwitterUrl(quoteObject);
  }
  if (state.status == "new quote") {
    //inject random quote on HTML
    quoteTextContent.innerHTML = state.data.quoteText;
    //inject author on HTML
    quoteAuthorContent.innerHTML = "- " + state.data.quoteAuthor;
    //calling the JS module that generates a Twitter url for Twitter intent
    getTwitterUrl(state.data);
  }
});

So now the random quote machine ships all the required user stories!

Action! What happens in the Redux store

As I use Redux DevTools Extension to time travel in the application’s state, I can check the state of the Redux store at every point in time. So, below is the state prior to finalizing the fetch() (i.e. status: "waiting" from reducers.js), the state when the store has the full JSON (i.e. status: "received") and the state when it additionally stores a new object called data that holds the current randomly selected quote (i.e. after the “Get New Quote” button is clicked).

Redux + Redux Thunk application structure

Like I did in flavor #4, as I’ve been jumping across a few JS modules in the write-up above, it can be helpful to zoom out and give a high-level view of the application’s file structure. Since this is a very simple app, I’m distributing actions, constants, selectors and reducers in different folders as opposed to following a more modular approach (bringing them together under a single folder related to every specific feature. Not following this approach since there aren’t many “features” in this application):

.
├── index.html
└── src
    ├── js
    │   ├── index.js
    │   └── js-modules
    │       ├── getTwitterUrl.js
    │       └── handleAsync.js
    ├── redux
    │   ├── actions
    │   │   └── actions.js
    │   ├── constants
    │   │   └── constants.js
    │   ├── reducers
    │   │   └── reducers.js
    │   └── selectors
    │       └── selectors.js
    └── stylesheets
        └── style.css

A visual look into the application’s execution flow

Despite this flavor using a middleware and working with asynchronicity, the code execution flow is not that much different to flavor #4. I’m changing the state in the Redux store with random quotes that get selected as the application runs (additionally, in this flavor, I’m also storing the contents of a full JSON file in the Redux store).

Yes, Redux updates the store with help from an action creator and a reducer (and in this flavor a third-party extension point (Redux Thunk middleware) is between dispatching an action and handing the action off to the reducer), but on high-level, this is how data flows in the application: Different UI elements, such as the Get New Quote button, trigger state changes in the Redux store (with a new random quote) and a store listener function next updates the UI with the new state.

And in a diagram:

You can check the project live. Source code for flavor #5 in Github.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 6 (to be posted next week), I will cover a sixth flavor and will be using a User Interface JavaScript library (React) to build the app’s UI.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

What happens in the Redux store? Here comes Part 5 of the Making a random quote machine in a few different flavors series. Doing this tiny project with 11 different front-end stacks. This week using Redux Thunk. pic.twitter.com/BAr6co5f4u

— Morse Wall (@morsewall) August 11, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 6 of this series has now been published. Go check it out! I'm using a User Interface Javascript library (React) to build the app’s UI in the sixth flavor.

This is Part 4 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #3, the data (quotes) is requested from a REST API.

In this flavor, I have the data inside an array stored inside a JavaScript module part of the project and I’m using state management (with Redux) to help me update the different UI elements with the current application state.

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array (this flavor)
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

In Part 5 (to be posted next week), I will cover a fifth flavor and will using Redux Thunk to call an asynchronous endpoint as the data (quotes) is requested from an external resource.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

State management? Why overcomplicate?

Why am I overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript? Because:

True that...

There are always (at least) two ways to solve a problem. One is faster, the other you just don’t know yet.

The above is the spirit behind the Making a random quote machine in a few different flavors series. And with that in mind, there is no better way to practice a new way to solve a problem than to ship a simple app in a simpler environment with fewer moving parts. Enjoy!

What is state ?

State is the “situation” the application is currently in. To exemplify, a few of the many states a given application can be in, at any moment, are for instance:

• loaded;
• not loaded;
• logged-in;
• not logged-in;
• hamburger navigation menu open;
• hamburger navigation menu closed;
• etc.

For this random quote machine application, the state stores a piece of data, a random quote that gets selected when the application runs. This state (random quote) is then listened to and different UI elements are updated with it.

The GIF below shows the state changing following a certain action-event in the application.

As a note, to track state (as per gif above), I use Redux DevTools Extension to time travel in the application’s state. The extension records dispatched actions (more on dispatched actions below in the article) and the state of the Redux store (more on the store further down) at every point in time. This allows me to inspect the state and travel back in time to a previous application state without reloading the page.

Flavor #4: HTML + CSS + Redux + quotes array in JS module

First things first, the data is stored in a JavaScript module. Because good software developers divide their code into modules, right? In other words, unlike previous flavors in this series (all JS code was previously inside a single file), there are a number of JavaScript files in this flavor.

Like previously, there is a tiny number of quotes in the code snippet below (so I can illustrate the point), but many more quotes in the array in production.

The getRandomQuote function spits out a random quote from the quotes array. I then export getRandomQuote so I can use it in another JS module.

//getRandomQuote.js
//defining function that accesses random quote from quotes array, making it a JS function/module
const getRandomQuote = () => {
  //defining an array for the quotes, wrapping it inside a JS function/module
  const quotes = [
    {
      quoteText:
        '"Many of you appear concerned that we are wasting valuable lesson time, but I assure you we will go back to school the moment you start listening to science and give us a future."',
      quoteAuthor: "@GretaThunberg",
    },
    {
      quoteText:
        '"I was fortunate to be born in a time and place where everyone told us to dream big. I could become whatever I wanted to. I could live wherever I wanted to. People like me had everything we needed and more. Things our grandparents could not even dream of. We had everything we could ever wish for and yet now we may have nothing. Now we probably don’t even have a future any more."',
      quoteAuthor: "@GretaThunberg",
    },
  ];
  //access random quote from quote array
  return quotes[Math.floor(Math.random() * quotes.length)];
};

export default getRandomQuote;

Adding the Redux library

The Redux library is available from a precompiled UMD package, so I can simply add it as script to my HTML. The snippet below shows the bottom of my HTML.

Note also the type="module" used when linking index.js. Given I’m creating index.js as a JavaScript module, this is necessary to inform the browser to deal with it appropriately.

<!-- index.html -->
	</footer>
	<!-- adding the Redux library from a precompiled UMD package. window.Redux is the global variable to call Redux. -->
	<script src="https://unpkg.com/redux@4.0.4/dist/redux.js"></script>
	<script type="module" src="src/js/index.js"></script>
</body>
</html>

With the library added, the UMD build makes Redux available as a window.Redux global variable. I’m calling that global variable Redux, so I can simply call the library by Redux from now on.

//index.js
// The UMD build makes Redux available as a window.Redux global variable
const Redux = window.Redux;

Action-events: events triggering actions

Back to the user stories, I want to be able to click a UI element (a button) to get a new quote. So, to make things more readable as I refer to UI elements throughout the code, I’m naming them appropriately.

//index.js
//defining UI elements
const newQuoteButton = document.getElementById("new-quote");
const quoteTextContent = document.getElementById("text");
const quoteAuthorContent = document.getElementById("author");
const tweetButton = document.getElementById("tweet-quote");

I’m creating a UI listener function tied to the newQuoteButton. This function will be dispatching actions via the newQuoteActionCreator action creator (more on action creators further down) to the Redux store (the Redux store is where the state lives) when a click event happens.

//index.js
//creating UI listeners. Dispatching actions (via the action creators that return a "type" to the reducer) to the redux store. When a new state is set in the Redux store, the store listeners will be retrieving the current state held in the Redux store
newQuoteButton.addEventListener("click", () => {
  store.dispatch(newQuoteActionCreator());
});

These actions, created by action creators, are simply objects that contain information about an action event that has occurred. The actions carry a type property, this property specifies the type of action that occurred.

It is common practice to write action types as const declarations.

//constants.js
//defining action types
export const NEW_QUOTE = "NEW_QUOTE";

Given I’m declaring those constants in a separate constants.js module, I’m importing the const into the action creator actions.js module.

I’m also importing getRandomQuote in actions.js since I’m using it in the module.

The action creator here (newQuoteActionCreator) is a function that returns an action. It creates an object. Inside the returned action/object, I’m naming payload the key that will be associated with the object that will store the selected random quote.

//actions.js
import { NEW_QUOTE } from "../constants/constants.js";
import getRandomQuote from "../../js/js-modules/getRandomQuote.js";

//defining action creator. a function that returns an action (object that contains information about an action-event that has occurred). The action creator gets called by `dispatch()`
const newQuoteActionCreator = () => {
  let quoteObject = getRandomQuote();
  return {
    type: NEW_QUOTE,
    payload: quoteObject,
  };
};

export default newQuoteActionCreator;

So, when newQuoteActionCreator is called, it returns an action (which has an informative type). Another function, called reducer, makes sense of the type and informs the Redux store) how to respond to the action. In other words, the reducer tells the Redux store how to modify the state.

The reducer takes state and action as arguments and returns a new state.

//reducers.js
import { NEW_QUOTE } from "../constants/constants.js";
import getRandomQuote from "../../js/js-modules/getRandomQuote.js";

//defining initial state
const defaultQuote = getRandomQuote();

//defining reducer function to allow the Redux store to know how to respond to the action created
const getNextQuoteReducer = (state = defaultQuote, action) => {
  switch (action.type) {
    case NEW_QUOTE:
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
};

export default getNextQuoteReducer;

As state is immutable and should never be directly modified, I’m using the object spread operator to return a new copy of the state.

The new state object has a new property: data and this property has value equal to the object associated with payload (see newQuoteActionCreator).

I still need to create the Redux store. The createStore() method) takes the getNextQuoteReducer reducer function as an argument.

//index.js
//creating the Redux store. This is where the state lives.
const store = Redux.createStore(getNextQuoteReducer);

Redux application structure

As I’ve been jumping across a few JS modules in the write-up above, it can be helpful to zoom out and give a high-level view of the application’s file structure. Since this is a very simple app, I’m distributing actions, constants and reducers in different folders as opposed to following a more modular approach (bringing them together under a single folder related to every specific feature. Not following this approach since there aren’t many “features” in this application):

.
├── index.html
└── src
    ├── js
    │   ├── index.js
    │   └── js-modules
    │       ├── getRandomQuote.js
    │       └── getTwitterUrl.js
    ├── redux
    │   ├── actions
    │   │   └── actions.js
    │   ├── constants
    │   │   └── constants.js
    │   └── reducers
    │       └── reducers.js
    └── stylesheets
        └── style.css

Subscribing to the Redux store

As the application runs, actions are dispatched to the store and the state changes. The store.subscribe() method allows me to create a store listener function which is called whenever an action is dispatched to the store. I then retrieve the new state with the getState() method and re-render my UI elements with data from the new state.

//index.js
//creating store listener function that is called whenever an action is dispatched to the store. The getState() method retrieves the current state held in the Redux store
store.subscribe(() => {
  //access the state of the app
  const state = store.getState();
  //inject random quote on HTML
  quoteTextContent.innerHTML = state.data.quoteText;
  //inject author on HTML
  quoteAuthorContent.innerHTML = "- " + state.data.quoteAuthor;
  //calling the JS module that generates a Twitter url for Twitter intent
  getTwitterUrl(state.data);
});

The getTwitterUrl function called by the subscribe() method handles truncating the quote text to the adequate tweetable number of characters; generates the url for the Tweet Quote button and sets the url on the HTML. The code here follows the logic implemented in part 1 of this series.

//getTwitterUrl.js
import tweetButton from "../index.js";

//defining function that generates a Twitter URL (for Twitter intent) and inject url on HTML, making it a JS function/module
const getTwitterUrl = (quoteObject) => {
  //truncating quote text in case full tweet gets to be over 280 characters
  let quoteTextElem = quoteObject.quoteText;
  let quoteAuthorElem = " - " + quoteObject.quoteAuthor;
  let contentQuote = quoteTextElem + quoteAuthorElem;
  if (contentQuote.length > 280) {
    let charCountAuthor = quoteAuthorElem.length;
    const extraStylingChar = "..." + '"';
    let extraCharCount = extraStylingChar.length;
    let subString =
      quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
      extraStylingChar +
      quoteAuthorElem;
    //generate url available for Twitter intent and inject url on HTML
    tweetButton.href = "https://twitter.com/intent/tweet?text=" + subString;
  } else {
    //generate url available for Twitter intent and inject url on HTML
    tweetButton.href = "https://twitter.com/intent/tweet?text=" + contentQuote;
  }
};

export default getTwitterUrl;

I still need to ship one missing user story: I want to be welcomed by a quote when I first load the app. Currently, I only get a quote if I click the Get New Quote button.

I’m adding a new listener that will check for the DOMContentLoaded event that fires when the initial HTML document has been completely loaded and parsed.

//index.js
//getting initial state, a reset state as the DOM is loaded.
document.addEventListener("DOMContentLoaded", () => {
  //access the state of the app
  const state = store.getState();
  //inject random quote on HTML
  quoteTextContent.innerHTML = state.quoteText;
  //inject author on HTML
  quoteAuthorContent.innerHTML = "- " + state.quoteAuthor;
  //calling the JS module that generates a Twitter url for Twitter intent
  getTwitterUrl(state);
});

So now the random quote machine ships all the required user stories!

A visual look into the application’s execution flow

In summary, I’m changing the state in the Redux store with random quotes that get selected as the application runs. Yes, Redux updates the store with help from an action creator and a reducer, but on high-level, this is how data flows in the application: Different UI elements, such as the Get New Quote button, trigger state changes in the Redux store (with a new random quote) and a store listener function next updates the UI with the new state.

And in a diagram:

You can check the project live. Source code for flavor #4 in Github.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 5 (to be posted next week), I will cover a fifth flavor and will be using Redux Thunk to call an asynchronous endpoint as the data (quotes) is requested from an external resource.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

True that...
There are always (at least) two ways to solve a problem. One is faster, the other you just don’t know yet.
So.. I've just added state management with Redux to an ultra simple application that could be shipped with 3 lines of functional Vanilla JS.
You are welcome 🙃 pic.twitter.com/5oNDwU7suB

— Morse Wall (@morsewall) August 4, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 5 of this series has now been published. Go check it out! I'm using Redux Thunk to call an asynchronous endpoint as the data (quotes) is requested from an external resource in the fifth flavor.

Part 3 of this series is now ON. You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #2, the data (quotes) is found in a same origin resource, since it is stored in a separate JSON file hosted together with the rest of the code.

In this flavor, I’m requesting the quotes data from a REST API.

These are the different flavors that are part of this series:

1. HTML + CSS + Vanilla JS + quotes array
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API (this flavor)
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

In Part 4 (to be posted next week), I will cover a fourth flavor and will be using state management (with Redux) to render the random quotes.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

Flavor #3: HTML + CSS + Vanilla JS + quotes REST API

To make things simple and not have to deal with back end code for such a simple project, I’m implementing an API with the help of Typicode’s My JSON Server. My JSON Server is a fake online REST server that does what I need it to do: GET API calls. Another positive is that it doesn’t persist data changes, i.e. POST, PUT, PATCH and DELETE API requests for a resource do not persist between different calls, so I don’t need to worry about securing the API.

I’m calling the API with the fetch() method, the same method I’m using in flavor #2.

//asynchronous function that gets data from the API and populates the quotes array
const makeRequest = async () => {
  const responseJSON = await fetch(
    "https://my-json-server.typicode.com/morsewall/jsondb/quotes"
  );
  quotes = await responseJSON.json();
};

The JSON response from the API returns all quotes and I’m randomly picking a quote from the data in my front end code (as done in previous flavors). The rest of the code remains the same as in flavor #1 and you can check the project live. Source code for flavor #3 in Github.

Using a different REST API. Making a random Kanye West quote machine.

Looking for alternative quote APIs to call (someone else’s data, on someone else’s server), I came across Andrew Jazbec’s Rest API for random Kanye West’s quotes. Fetching from that, doing a quick change to the background image and DONE: The Random Kanye West quote machine is ready to receive any random person on the web.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 4 (to be posted next week), I will cover a fourth flavor and will be using state management (with Redux) to render the random quotes.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post? Come say hello on Twitter!

Random quote machine done once, random quote machine done twice, now thrice. Doing this tiny project with 11 different front-end stacks. This week, by calling a REST API we get from a Greta Thunberg quote machine to a Kanye West quote machine. pic.twitter.com/KXDD2CsU5c

— Morse Wall (@morsewall) July 28, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 4 of this series has now been published. Go check it out! I’m using state management (with Redux) to help me update the different UI elements with the current application state in the fourth flavor.

Here comes Part 2 of this series. You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

In flavor #1, I have the data (quotes) inside an array. In this flavor, I’m storing the quotes in a separate JSON file.

This is Part 1 of an 11-part series. Each part using a different front end stack (different flavor). Starring in this flavor: Vanilla JavaScript.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

Goal with this series of writings: Build a random quote machine with 19 11 different front end stacks and ship quickly.

True that…

There are always (at least) two ways to solve a problem. One is faster, the other you just don’t know yet.

You can read more about this project’s background on the project’s page.

So, what should the random quote machine do? It should spit out quotes.

These are the user stories:

As a random person on the web inspired by Greta Thunberg (or not - see note below), I want to be welcomed by a nice inspirational quote from Greta Thunberg so that I become (even more) inspired.

1. As a random person on the web, I want to be able to click a button to get a new inspirational quote from Greta Thunberg so that I can pimp my inspiration levels.
2. As a random person on the web, I want to be able to share on Twitter the quote the random quote machine gives me so that I can share my source of inspiration with the world.

Note: Before you get your “I have issues with Greta Thunberg” sticker-coated pitchforks out: No matter your strongly held opinions…powerful narratives you know, gotta love them. Point being: don’t @ me if you dislike Ms. Thunberg.

Here are the different flavors available:

1. HTML + CSS + Vanilla JS + quotes array (this flavor)
2. HTML + CSS + Vanilla JS + JSON with quotes (members-only post)
3. HTML + CSS + Vanilla JS + quotes REST API
4. HTML + Vanilla JS + SAAS + quotes array (nah, because let’s be opinionated about SASS)
5. HTML + Vanilla JS + Bootstrap + quotes array (nah, because let’s be opinionated about Bootstrap)
6. HTML + CSS + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
7. HTML + CSS + Redux + quotes array
8. HTML + CSS + Redux + JQuery + JSON with quotes (nah, because let’s be opinionated about JQuery)
9. HTML + CSS + Redux + Redux Thunk + JSON with quotes
10. HTML + CSS + React + quotes array
11. HTML + CSS + React + JSON with quotes (members-only post)
12. HTML + CSS + React Hooks + quotes array
13. HTML + CSS + React Hooks + JSON with quotes (members-only post)
14. HTML + CSS + React + React Redux + quotes array (nah, because let’s be bullish about writing any new components with React Hooks)
15. HTML + CSS + React + React Redux + Redux Thunk + JSON with quotes (nah, because let’s be bullish about writing any new components with React Hooks)
16. HTML + CSS + React Hooks + React Redux + quotes array
17. HTML + CSS + React Hooks + React Redux + Redux Thunk + JSON with quotes
18. HTML + CSS + React Hooks + React Redux Hooks + quotes array (nah, because let’s be opinionated about React Redux Hooks)
19. HTML + CSS + React Hooks + React Redux Hooks + Redux Thunk + JSON with quote (nah, because let’s be opinionated about React Redux Hooks)

If you are new here, you may wonder why I am overcomplicating a really simple application that can be shipped in 3 lines of functional Vanilla JavaScript. And the reason is: Shipping a simple app in a simple environment with fewer moving parts = great way to practice a new way to solve a problem. This is the spirit behind the Making a random quote machine in a few different flavors series. Enjoy!

In Part 2 (to be posted next week), I will cover a second flavor and will be storing the quotes in a separate JSON file.

If you’re curious about the next flavors and would like to make a writer very happy today, you should subscribe to Morse Wall.

This is a simple project. Flavor #1 has essentially 3 lines of functional JavaScript code.

The URL to the source code for each flavor is linked at the bottom of each section in this series.

Flavor #1: HTML + CSS + Vanilla JS + quotes array

HTML and CSS aside (they can be found in the Github repo for flavor #1). I’m into Vanilla JavaScript universe in flavor #1. The data (quotes) are inside an array.

I’ve scraped the quotes with the help of Spider, a point&click scraping tool built by Amie-Chen. So, with the help of Spider, you can also go ahead and easily collect quotes from any prolific public figure you choose.

When I was done scraping, I’ve then downloaded a JSON from Spider and copy-pasted the quotes into an array inside my script.js. There are only 3 quotes in the code snippet below (so I can illustrate the point), but many more quotes in the array in production.

// script.js
//defining an array for the quotes
const quotes = [
  {
    quoteText:
      '"Many of you appear concerned that we are wasting valuable lesson time, but I assure you we will go back to school the moment you start listening to science and give us a future."',
    quoteAuthor: "Greta Thunberg",
  },
  {
    quoteText:
      '"I was fortunate to be born in a time and place where everyone told us to dream big. I could become whatever I wanted to. I could live wherever I wanted to. People like me had everything we needed and more. Things our grandparents could not even dream of. We had everything we could ever wish for and yet now we may have nothing. Now we probably don’t even have a future any more."',
    quoteAuthor: "Greta Thunberg",
  },
  {
    quoteText:
      '"That future was sold so that a small number of people could make unimaginable amounts of money. It was stolen from us every time you said that the sky was the limit, and that you only live once. You lied to us. You gave us false hope. You told us that the future was something to look forward to."',
    quoteAuthor: "Greta Thunberg",
  },
];

Given I want a random quote to be ready for me when the quote machine loads, I need to call a function (that I still need to define) that fetches a random quote and renders it my HTML.

// script.js
// inject a quote on screen when app loads
injectQuote();

And given I also want a new random quote when the user clicks a button, I’ve added a click event listener to the HTML element with new-quote id.

In the HTML, setting up new-quote id (as always, you can check the full source code in the repo. Also linked at the bottom of this write-up):

<!-- index.html -->
<button id="new-quote" class="new-quote">Get New Quote</button>

Back to JavaScript, adding the click event listener:

// script.js
//inject a quote on screen when "Get New Quote" button is clicked
document.getElementById("new-quote").addEventListener("click", function () {
  injectQuote();
});

injectQuote function

The bit missing is to define the function I’ve mentioned above that will fetch a random quote from my quotes array and render it in my HTML. I’m calling that function injectQuote.

// script.js
//function to access random quote from array and inject it together with author on HTML
function injectQuote() {}

injectQuote needs to pick a random quote from quotes, so let’s do that first thing. I’ll be incrementally expanding injectQuote in each of the following code snippets, to the point it will be clear it would have been better to break injectQuote down into smaller functions (huh…)

// script.js
//function to access random quote from array and inject it together with author on HTML
function injectQuote() {
  //access random quote from quote array
  let randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
}

After fetching a random quote, injectQuote should render the quote text and and quote author in my HTML.

// script.js
//function to access random quote from array and inject it together with author on HTML
function injectQuote() {
  //access random quote from quote array
  let randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  //inject random quote on HTML
  document.getElementById("text").innerHTML = randomQuote.quoteText;
  let quoteTextElem = randomQuote.quoteText;
  //inject author on HTML
  document.getElementById("author").innerHTML = "- " + randomQuote.quoteAuthor;
  let quoteAuthorElem = " - " + randomQuote.quoteAuthor;
}

With the above in production, the random quote machine beautifully renders a new quote upon page load and when a user clicks a button requesting a new quote.

Making the machine tweet

However, I haven’t made the Tweet Quote button work yet. So, to invoke Twitter Web Intents, injectQuote should URL-encode the tweet text, concatenate it with https://twitter.com/intent/tweet?text= and pass it to the HTML element’s href.

In the HTML, setting up tweet-quote id:

<!-- index.html -->
<button class="tweet-quote">
  <a id="tweet-quote" href="twitter.com/intent/tweet" target="_blank"
    ><em class="fab fa-twitter"></em>Tweet Quote</a
  >
</button>

And back to JavaScript:

//script.js
//function to access random quote from array and inject it together with author on HTML
function injectQuote() {
  //access random quote from quote array
  let randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  //inject random quote on HTML
  document.getElementById("text").innerHTML = randomQuote.quoteText;
  let quoteTextElem = randomQuote.quoteText;
  //inject author on HTML
  document.getElementById("author").innerHTML = "- " + randomQuote.quoteAuthor;
  let quoteAuthorElem = " - " + randomQuote.quoteAuthor;
  //defining tweet text
  let contentQuote = quoteTextElem + quoteAuthorElem;
  //generate url available for Twitter intent and inject url on HTML
  document.getElementById("tweet-quote").href =
    "https://twitter.com/intent/tweet?text=" + contentQuote;
}

Ok, now the random quote machine ships all the required user stories.

The issue here though is that some of Greta’s quotes are longer than 280 characters (better than 140 char, I know. Thanks @jack). I have to truncate the quote text to allow the user to tweet the quote without having to delete characters. injectQuote (now already doing far too much for a single function) needs some adjustments.

// script.js
//function to access random quote from array and inject it together with author on HTML
function injectQuote() {
  //access random quote from quote array
  let randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  //inject random quote on HTML
  document.getElementById("text").innerHTML = randomQuote.quoteText;
  let quoteTextElem = randomQuote.quoteText;
  //inject author on HTML
  document.getElementById("author").innerHTML = "- " + randomQuote.quoteAuthor;
  let quoteAuthorElem = " - " + randomQuote.quoteAuthor;
  //truncating quote text in case full tweet gets to be over 280 characters
  let contentQuote = quoteTextElem + quoteAuthorElem;
  if (contentQuote.length > 280) {
    let charCountAuthor = quoteAuthorElem.length;
    const extraStylingChar = "..." + '"';
    let extraCharCount = extraStylingChar.length;
    let subString =
      quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
      extraStylingChar +
      quoteAuthorElem;
    //generate url available for Twitter intent and inject url on HTML
    document.getElementById("tweet-quote").href =
      "https://twitter.com/intent/tweet?text=" + subString;
  } else {
    //generate url available for Twitter intent and inject url on HTML
    document.getElementById("tweet-quote").href =
      "https://twitter.com/intent/tweet?text=" + contentQuote;
  }
}

Done. The random quote machine is ready to receive any random person on the web.

If you think a great Greta Thunberg quote is missing, I’ll be happy to include it. Pull requests are more than welcome in the Github repo for flavor #1.

Acknowledgement

The following goes without saying, but here it comes anyways: Please note that in this ever changing world of technology, I am writing this article in July 2019 (hello, summer!) and alternate solutions might have become available as you read this writing.

In Part 2 (to be posted next week), I will cover a second flavor and will be storing the quotes in a separate JSON file.

If you’re curious about the next flavors, you should subscribe to Morse Wall. I think you’ll like it a lot!

So, what did you like about this post?  Come say hello on Twitter!

My favourite formula for solving a software development problem
1) Get it done fast and cheaply
2) Solve the same problem in 11 different ways because *shiny new thing* syndrome

🙃Ha!
Over the next weeks I'll write about 11 different ways to build a random quote machine pic.twitter.com/gLBWItAkCi

— Morse Wall (@morsewall) July 15, 2021

Also, if you have built a random quote machine after reading this post, share it as comment to the tweet above on Twitter. Really excited to see what you create!

Happy coding!

Where to find me:

Follow me on Twitter:

You can always get my latest writings directly to your email address by subscribing to Morse Wall.

UPDATE

Part 2 of this series has now been published. Go check it out! I'm storing the quotes in a separate JSON file in the second flavor.