Redux Quick Start Guide

A beginner's guide to managing app state with Redux

James Lee, Tao Wei, Suresh Kumar Mukhiya

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781789806342
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Integrate Redux with React and other front-end JavaScript frameworks efficiently and manage application states effectively

Key Features

• Get better at building web applications with state management using Redux
• Learn the fundamentals of Redux to structure your app more efficiently
• This guide will teach you develop complex apps that would be easier to maintain

Book Description

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.

What you will learn

• Follow the test-driven development (TDD) approach to develop a single-page application
• Add important middleware, such as Redux store middleware, redux-saga middleware, and language middleware, to your application
• Understand how to use immutableJS in your application
• Build interactive components using ReactJS
• Configure react-router-redux and explore the differences between react-router-dom and react-router-redux
• Use Redux Dev tools to debug your application
• Set up our API server and create the API required for our application

Who this book is for

This book is meant for JavaScript developers interesting in learning state management and building easy to maintain web applications.

Extending Redux with Middleware

In this chapter, we are going to learn about what middleware is, look at different types of middleware, and learn about how they work. We are also going to extend our Redux store using the Saga middleware. We covered the concept of router middleware in Chapter 3, Routing.

In this chapter, we will cover the following topics:

• Learning about middleware and its related patterns
• Exploring the usage of redux-saga as middleware
• Outlining some further reading resources

Exploring middleware

Middleware is some code that we can use between the framework that is receiving a request, and the framework that is generating a response. Generally, middleware presents a third-party extension point in dispatching an action, and the moment it reaches the reducer. We covered the concepts of actions and reducers in Chapter 1, Understanding Redux. Do you remember it? Developers apply the Redux middleware for logging, communicating with an asynchronous API, crash reporting, language translation, handling side effects, and routing.

We will continue with the code base we have in Chapter 5, React with Redux, and add more functionalities on top of it. In this chapter, we are going to extend the store with some middleware.

Router middleware

We have already used the connected-react-router/immutable library in Chapter 3, Routing, in which we implemented routerMiddleware to solve the routing issue. To recap, we are using this library as the binding for React Router V4. We extended our store using this middleware when we configured the store. The code snippet can be found in the app/configureStore.js file in both CH03 and CHO5.

redux-saga middleware

redux-saga is a third-party JavaScript library that helps to easily and efficiently manage an application's side effects, including asynchronous activities such as fetching data and accessing browser cache.

Mukhiya and Hung outline the essential importance of using redux-saga in a web application. We can use the image used in this paper as a reference to better understand the need for redux-saga. To explain it in one sentence, we can say that redux-saga is responsible for handling side effects. Saga uses ES6 Generators (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) to make asynchronous flows easy to read, write, and test. If you are not familiar with generators, it would be best to pause before the next section and read up on them. Here is a couple of suggested articles: https://redux-saga.js.org/docs/ExternalResources.html.

Basically, generators are functions that provide the flexibility to be paused and resumed rather than executing all the statements in one pass. yield in a generator represents an asynchronous step in a more synchronous process, and is analogous to await in an async function:

Figure 6.1: The logical model of the single page architecture using Redux-Saga [1]

Redux Saga provides us with the async dispatch which ensures HTTP requests will not clutter up the execution flow. Redux Saga creates all the logic of event stream processing. Saga runs in the background right after the app is launched and observes all the actions that the store dispatches. Once it finds that the correct actions have been dispatched, it listens to them and performs any necessary asynchronous activities, such as fetching data or deleting data from the backend by calling the API layer. For example, in the preceding diagram, once Saga observes that the DELETE action been dispatched, it will call the API with the correct payload to delete the doctor. The reducers take in the types of the actions and update the store's data, which in turn are reflected in the actional DOM [1].

Getting started

We are going to extend the application that we worked on in Chapter 5, React with Redux. We will be fetching data from a real REST API using the Redux Saga middleware. To get started, the first step is to add the library to our application.

Adding Saga to the application

From inside the application root, we can add Saga as follows:

yarn add redux-saga
OR
npm install --save redux-saga

While the library can be used directly in containers to pass in a higher-order function, we are going to use Saga as middleware. Later, we will be discussing the benefits of having it as middleware.

In order to run Saga, we require two things:

• A Saga middleware with a list of Saga functions
• We need to connect middleware to the Redux store

Connecting the Saga middleware to the store

We can add Saga to our middleware using the following snippet. We can modify the configureStore.js file inside app/configureStore.js as follows:

import { createStore, applyMiddleware, compose } from 'redux';
import { fromJS } from 'immutable';
import { routerMiddleware } from 'connected-react-router/immutable';
import createSagaMiddleware from 'redux-saga';

import createReducer from './reducers';

const sagaMiddleware = createSagaMiddleware();

export default function configureStore(initialState = {}, history) {
 const middlewares = [sagaMiddleware, routerMiddleware(history)];

 const enhancers = [applyMiddleware(...middlewares)];

 const store = createStore(
 createReducer(),
 fromJS(initialState),
 compose(...enhancers),
 );

 // Extensions
 store.runSaga = sagaMiddleware.run;
 store.injectedReducers = {};
 store.injectedSagas = {};

 return store;
}

The most notable points are as follows:

• We are using the createSagaMiddleware factory function from redux-saga. To find out more about factory functions, consider reading the documentation website (https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html).
• We create the Saga middleware and pass it to the store.

To understand the concept of redux-saga, we will take the help of the pre-built REST API. We will discuss more about how these REST APIs are built in Chapter 8, Understanding the REST API. Without going more detail about how the REST API is constructed using Express and Node.js, we assume that we have an API that provides authentication and authorization and other required endpoints. W...