Random Quote – Part 4 – Redux: Using various front end stacks

11 min read

Building a random quote machine with Redux

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.

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.


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 join Morse Wall’s newsletter.


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:

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.

Tracking Redux state changes

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:

Redux code execution

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

Live project Source code


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 join Morse Wall’s newsletter. I think you’ll like it a lot!


So, what did you like about this post? Leave a comment or come say hello on Twitter!

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

Happy coding!

Enjoyed this content?

Help keep it coming by sending a donation or buying me coffees.
You can also join Morse Wall's newsletter, or subscribe to various site feeds to get notified of new posts or follow Morse Wall on social media.

Leave a comment

by Pat
by Pat