Reader small image

You're reading from  Redux Made Easy with Rematch

Product typeBook
Published inAug 2021
Reading LevelIntermediate
PublisherPackt
ISBN-139781801076210
Edition1st Edition
Languages
Tools
Right arrow
Author (1)
Sergio Moreno
Sergio Moreno
author image
Sergio Moreno

Sergio Moreno is a front-end developer with more than 4 years of experience really focused in the analysis, design, development and building large-scale applications. Formerly worked at Allfunds, the world's largest fund distribution network, he led the front-end team to build a full new suite of products for the new Digital section of Allfunds. He entered the open-source world in 2019 where's contributed to big companies like Google, Facebook, Airbnb, or Pinterest and much more. In 2020 focused his contributions to Rematch, where he released the v2 version with a full rewrite of the codebase and a full compatibility with Typescript and so many improvements like reducing the bundlesize in some cases by 110%, and Lingui, an amazing internationalization library, who helped to release the v3 version. In 2021, joined Flowable as Product Engineer, a compact and highly efficient workflow and business process management platform for developers, system admins and business users.
Read more about Sergio Moreno

Right arrow

Chapter 3: Redux First Steps – Creating a Simple To-Do App

In this chapter, we'll learn how to create a real Redux to-do app, where we can introduce unlimited tasks to a list, remove them individually, toggle between completed and pending tasks, and, of course, remove all the completed ones.

This chapter is really important for understanding how plain vanilla Redux works. We use plain vanilla Redux to demonstrate more clearly how Rematch abstracts some of these concepts, and we'll also focus on learning about some important terminology and concepts of Rematch, such as initializing stores, writing reducers, or dispatching actions.

In this chapter, we will cover the following topics:

  • Preparing the environment
  • Creating our first store
  • Creating our first reducer
  • Dispatching actions

By the end of this chapter, you'll be able to create a real Redux to-do tasks application with real functionalities just by applying the theory we covered...

Technical requirements

To follow along with this chapter, you will need the following:

  • Basic knowledge of Vanilla JavaScript and ES6 features
  • Basic knowledge of HTML5 features
  • A browser (Chrome or Firefox, for instance)
  • A code editor (Visual Studio Code, for instance)

You can find the code for this chapter in the book's GitHub repository at https://github.com/PacktPublishing/Redux-Made-Easy-with-Rematch/tree/main/packages/chapter-3.

Preparing the environment

Redux can be used in practically any user interface layer that exists. To start this chapter, we'll build a simple to-do app with Vanilla JavaScript; that means that we'll use plain JavaScript without any additional libraries such as React or jQuery.

In this chapter, we won't need any bundlers such as Webpack. Webpack is a module bundler, which means its main purpose is bundling all of your JavaScript files, style files, and assets to make static assets that can be served directly, for instance, static HTML files. We will need Webpack in the following chapters to make React work with Redux and some external libraries. Using Webpack to bundle websites is commonplace in real-world apps, but for this introduction to Redux, we can explain things without it.

Redux ships Universal Module Definition (UMD) builds. This means that all the code provided by Redux in the distributable package will work on both frontend and backend environments. On...

Creating our first store

To be able to use Redux features inside our index.html file, we need to import the Redux library. There are several ways of doing this, from downloading the code locally and importing it via a <script /> source tag, to installing it with a package manager such as npm.

Between the options of using npm or downloading the code locally, there is a tool called unpkg, a global content delivery network for everything that is published on npm. With this, we can easily load any file from any package using a URL.

So, let's modify the previous HTML snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-  scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Redux Example</h1>
  <script src="https...

Creating our first reducer

As we saw in Chapter 1, Why Redux? An Introduction to Redux Architecture, in the How does Redux work? section, our logic must be introduced inside a reducer function. Let's identify exactly what the main objective of our application is so we can come up with actions that suit those objectives – we need our application to do the following:

  • Add a task.
  • Remove a to-do task.
  • Toggle tasks to show as completed.
  • Clear completed tasks.

We will look at each of these points in detail now.

Adding a task

Adding a task to our store means pushing a new task to our todos array. This is important so that we know what code we must introduce inside our reducer.

Firstly, we can agree on the schema that will contain our tasks. This definition will be used throughout the application, so remember that our tasks will always include an ID, a title, and a completed check:

{
  "id": id,
  "title...

Dispatching actions

Dispatching actions works in the same way for any action. Just running the store.dispatch() method will send the action to the reducer. You just need to pass an object as the first argument with the corresponding type property and the value.

We can start by triggering the action to add a new task to the state. Inside the todo-app.js file under store.subscribe(), we can add these lines of code that will handle how the form works:

const form = document.getElementById("add-todo");
form.addEventListener("submit", event => {
  event.preventDefault();
  const inputValue = event.target.elements.todoText.value;
  store.dispatch({
    type: "ADD_TODO",
    title: inputValue,
    id: Date.now()
  });
  event.target.elements.todoText.value = "";
});

Here, we're accessing the form element and adding an eventListener...

Summary

In this chapter, we have learned how to create a real application for to-do tasks with real functionalities. We have also learned how Redux DevTools works and, most importantly, how the Redux architecture can be made to be predictable with a few steps.

In the next chapter, we will learn how to develop the same application but with Rematch best practices, as well as see how Rematch can turn something complex into an easy task, thereby reducing the learning curve.

lock icon
The rest of the chapter is locked
You have been reading a chapter from
Redux Made Easy with Rematch
Published in: Aug 2021Publisher: PacktISBN-13: 9781801076210
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime

Author (1)

author image
Sergio Moreno

Sergio Moreno is a front-end developer with more than 4 years of experience really focused in the analysis, design, development and building large-scale applications. Formerly worked at Allfunds, the world's largest fund distribution network, he led the front-end team to build a full new suite of products for the new Digital section of Allfunds. He entered the open-source world in 2019 where's contributed to big companies like Google, Facebook, Airbnb, or Pinterest and much more. In 2020 focused his contributions to Rematch, where he released the v2 version with a full rewrite of the codebase and a full compatibility with Typescript and so many improvements like reducing the bundlesize in some cases by 110%, and Lingui, an amazing internationalization library, who helped to release the v3 version. In 2021, joined Flowable as Product Engineer, a compact and highly efficient workflow and business process management platform for developers, system admins and business users.
Read more about Sergio Moreno