Book Image

Redux Quick Start Guide

By : James Lee, Tao Wei, Suresh Kumar Mukhiya
Book Image

Redux Quick Start Guide

By: James Lee, Tao Wei, Suresh Kumar Mukhiya

Overview of this book

Starting with a detailed overview of Redux, we will follow the test-driven development (TDD) approach to develop single-page applications. We will set up JEST for testing and use JEST to test React, Redux, Redux-Sage, Reducers, and other components. We will then add important middleware and set up immutableJS in our application. We will use common data structures such as Map, List, Set, and OrderedList from the immutableJS framework. We will then add user interfaces using ReactJS, Redux-Form, and Ant Design. We will explore the use of react-router-dom and its functions. We will create a list of routes that we will need in order to create our application, and explore routing on the server site and create the required routes for our application. We will then debug our application and integrate Redux Dev tools. We will then set up our API server and create the API required for our application. We will dive into a modern approach to structuring our server site components in terms of Model, Controller, Helper functions, and utilities functions. We will explore the use of NodeJS with Express to build the REST API components. Finally, we will venture into the possibilities of extending the application for further research, including deployment and optimization.
Table of Contents (16 chapters)
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Preface
Index

Understanding Redux methods


Let's implement a simple example to turn on and turn off the light. We can build a simple robot that just listens to commands and, based on the commands, performs some actions. For simplicity, suppose that our robot can only understand two commands, as follows:

  1. TURN_ON
  2. TURN_OFF

Now, let's build our robotic function:

const tubeLight = (state = "OFF", action) => {
 switch (action.type) {
   case "TURN_ON":
     return "ON";
   case "TURN_OFF":
     return "OFF";
   default:
     return state;
 }
};

This is a simple JavaScript function that takes the initial state and action as parameters and returns a state. That sounds like something familiar, doesn’t it? Yup; you are right. This is a simple reducer function.

In the first section, you learned Redux's first principle: a single source of truth. Redux provides a function called createStore that takes the main reducer file and creates the store. Let's create a store, as follows:

import { createStore } from "redux";
const store = createStore(tubeLight);

So far, so good. So, what did we do here? We imported the createStore function from the Redux library that is given tubeLight, which is a reducer, as an argument and is saved into a variable called a store. Here, you can recall a functional programming concept. A function can consume another function. Now, as you have already seen, the store has three methods: getState, dispatch, and subscribe. Let's use them.

log the initial state, as follows:

console.log("Initially tubelight is: ", store.getState());

Try to build it, and run it again (yarn build && yarn start). Check the console:

Initially tubelight is:  OFF

Nothing complex, right? We provided the initial state to OFF, and it logged the initial state as OFF. That looks good. Now, let's try to modify the store. In other words, we should instruct the robot to turn on the tubelight. Remember, we can only modify the store by using a dispatch function. Now, we can use that function and log the state, in order to see the state change:

store.dispatch({ type: "TURN_ON" });
console.log("Now tubelight is: ", store.getState());

The output that you get on the console should be as follows:

Now tubelight is:  ON

Now, it makes sense, right? Let's go further and display the state on the browser, rather than on the console. To do that, let's create a button. When we press the button, it should toggle the tubelight state. That is to say, if the tubelight is ON, we turn it off, and vice versa. To make it simple, let's forget about React and use native JavaScript:

const button = document.createElement("button");
button.setAttribute("id", "lightButton");
var text = document.createTextNode("Toggle Light");
button.appendChild(text);
document.body.appendChild(button);

The preceding snippet will create a simple button on the browser, with the text Toggle Light and the ID lightButton.

Now, we need to add an event listener. That is to say, if the tubelight is on, we turn it off by clicking on the button. We can do that as follows:

document.getElementById("lightButton").addEventListener("click", () => {
 if (store.getState() === "ON") {
   store.dispatch({ type: "TURN_OFF" });
 } else {
   store.dispatch({ type: "TURN_ON" });
 }
});

Now, let's render that in the browser, inside of the body tag:

const render = () => {
 document.body.innerText = store.getState();
 document.body.appendChild(button);
};

This will render the initial state of the store. But we need to display when the state changes. To do that, our third method of the store comes into play (subscribe()):

store.subscribe(render);
render();

Now, try to build the app and run it (yarn build && yarn start). Try to click on the button to change the state, and see whether the state is reflected on the browser. Pretty sweet, right? You can find the working example of this code in the GitHub repository, inside CH01/getting-started.

Manually updating the DOM does not scale in a real application. To do so, we use the help of other libraries, such as React. We will configure React with Redux and use it to understand other complex scenarios in Redux.