Redux Quick Start Guide

Redux Quick Start Guide

by James Lee, Tao Wei, Suresh Kumar Mukhiya
Released February 2019
Publisher(s): Packt Publishing
ISBN: 9781789610086

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Publisher resources

Download Example Code

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Redux Quick Start Guide
  3. Dedication
  4. About Packt
    1. Why subscribe?
    2. Packt.com
  5. Contributors
    1. About the authors
    2. About the reviewers
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  7. Understanding Redux
    1. The need for Redux
    2. Functional programming
      1. Assigning functions to variables
      2. Adding functions to objects and arrays
      3. Functions as arguments
      4. Functions returned by functions
      5. Higher-order functions
      6. Pure functions
      7. Compositions
    3. Fundamental principles of Redux
      1. Single source of truth
      2. Read-only nature of the state
      3. The reducer principle – changes are made with pure functions
    4. The Redux ecosystem
    5. Elements of Redux
      1. Actions
      2. Action creators
      3. Reducers
      4. Store  
        1. getState()
        2. dispatch(action)
        3. subscribe(listeners)
        4. replaceReducer(nextReducer)
    6. Redux life cycle
    7. Getting started
    8. Understanding Redux methods
    9. Setting up the project
      1. Configuring the store
      2. Configuring the root reducer
      3. Configuring our app with Redux
      4. Creating utilities
      5. Creating the first container
    10. Summary
    11. Further study
  8. Testing
    1. Setting up Jest
    2. Testing ES6 functions
      1. Testing a function
      2. A general testing scenario
      3. Time mocks
    3. Testing React components
      1. React components and mocking components
      2. Multiple React components
      3. Testing event handlers
    4. Testing Redux
      1. Testing action creators
      2. Testing reducers
      3. Higher-order functions
    5. Summary
    6. Further reading
  9. Routing
    1. Using react-router-dom
    2. Understanding route props
    3. The Redirect component
    4. Using connected-react-router
    5. History
    6. Mocking react-router-dom for testing
    7. Summary
    8. Further reading
  10. The Concept of Immutability
    1. The need for immutability
      1. The data reference problem
      2. Reference handling
    2. Getting started with Immutable JS
      1. Components of Immutable JS
        1. FromJS
        2. Map
        3. List
        4. Set
    3. The TODO app
      1. Components
      2. Reducers
      3. Connecting with Redux
      4. Using Immutable JS in our project
      5. The Immutable JS ecosystem
    4. Frequently asked questions
    5. Summary
    6. Further reading
  11. React with Redux
    1. Components of React
    2. Principles of React
    3. New in React 16.8
      1. New features with React 16.8
    4. User interfaces
    5. Project structure
    6. React component libraries
      1. Antd
      2. styled-component
      3. Redux form
    7. containers/App/index.js
    8. Login page
    9. Register page
    10. Users pages
      1. Listing all of the users
      2. Adding a new user page
    11. Connecting with Redux
      1. Action types
      2. Connecting with Redux
      3. Connecting the login page with Redux
        1. Action creators
        2. Constant
        3. Connect
      4. Connecting an add user page to Redux
      5. Login page reducer
    12. Understanding selectors
      1. Why selectors?
      2. reselect
    13. Summary
    14. Further study
  12. Extending Redux with Middleware
    1. Exploring middleware
    2. Router middleware
    3. redux-saga middleware
      1. Getting started
        1. Adding Saga to the application
        2. Connecting the Saga middleware to the store
      2. Using the REST API
        1. Prerequisites
          1. Seeding users
          2. Seeding doctors
          3. Seeding admin
      3. Connecting the login functionality with the API
        1. Creating Saga
        2. Passing the subset of the state to a component
      4. Connecting the home page with the API
      5. CRUD on users
        1. Defining Saga
    4. Language middleware
    5. Summary
    6. Further study
  13. Debugging Redux
    1. Integrating Redux DevTools
      1. Installing Redux DevTools
      2. Redux DevTools extension
    2. Understanding Redux DevToolsHMR
      1. Replacing the hot module
      2. Loading the hot module
    3. Summary
    4. Further reading
  14. Understanding the REST API
    1. The REST principle
      1. The HTTP verbs and HTTP response status code
    2. Project structure
      1. Seeding users
    3. User endpoints
      1. POST – Creating a user
      2. GET – List of users
      3. Authentication and authorization
        1. Authentication
        2. Authorization
      4. Getting a single user information
      5. Updating user information
    4. Other endpoints
    5. Summary
    6. Further reading
  15. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Redux Quick Start Guide
  • Author(s): James Lee, Tao Wei, Suresh Kumar Mukhiya
  • Release date: February 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789610086