Learning Redux

Learning Redux

by Daniel Bugl
Released August 2017
Publisher(s): Packt Publishing
ISBN: 9781786462398

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

Build consistent web apps with Redux by easily centralizing the state of your application.

About This Book

  • Write applications that behave consistently, run in different environments (client, server and native), and are easy to test
  • Take your web apps to the next level by combining the power of Redux with other frameworks such as React and Angular
  • Uncover the best practices and hidden features of Redux to build applications that are powerful, consistent, and maintainable

Who This Book Is For

This book targets developers who are already fluent in JavaScript but want to extend their web development skills to develop and maintain bigger applications.

What You Will Learn

  • Understand why and how Redux works
  • Implement the basic elements of Redux
  • Use Redux in combination with React/Angular to develop a web application
  • Debug a Redux application
  • Interface with external APIs with Redux
  • Implement user authentication with Redux
  • Write tests for all elements of a Redux application
  • Implement simple and more advanced routing with Redux
  • Learn about server-side rendering with Redux and React
  • Create higher-order reducers for Redux
  • Extend the Redux store via middleware

In Detail

The book starts with a short introduction to the principles and the ecosystem of Redux, then moves on to show how to implement the basic elements of Redux and put them together. Afterward, you are going to learn how to integrate Redux with other frameworks, such as React and Angular.

Along the way, you are going to develop a blog application. To practice developing growing applications with Redux, we are going to start from nothing and keep adding features to our application throughout the book. You are going to learn how to integrate and use Redux DevTools to debug applications, and access external APIs with Redux. You are also going to get acquainted with writing tests for all elements of a Redux application. Furthermore, we are going to cover important concepts in web development, such as routing, user authentication, and communication with a backend server

After explaining how to use Redux and how powerful its ecosystem can be, the book teaches you how to make your own abstractions on top of Redux, such as higher-order reducers and middleware.

By the end of the book, you are going to be able to develop and maintain Redux applications with ease. In addition to learning about Redux, you are going be familiar with its ecosystem, and learn a lot about JavaScript itself, including best practices and patterns.

Style and approach

This practical guide will teach you how to develop a complex, data-intensive application leveraging the capabilities of the Redux framework.

Table of contents

  1. Preface
    1. About the book
    2. What this book covers
    3. What you need for this book
    4. Who this book is for
    5. Conventions
    6. Reader feedback
    7. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Why Redux?
    1. Defining the application state
    2. Defining actions
    3. Tying state and actions together
    4. Redux' three fundamental principles
      1. Single source of truth
      2. The read-only state
      3. State changes are processed with pure functions
    5. Introduction to the Redux ecosystem
    6. Summary
  3. Implementing the Elements of Redux
    1. The Redux cycle
      1. An action is dispatched
      2. The main reducer function gets executed
      3. Redux saves the new state
      4. Strictly unidirectional data flow
    2. Running code examples
      1. Setting up a new project
        1. Setting up Node.js
        2. Initializing the project
        3. Setting up webpack
        4. Setting up Babel
        5. Setting up the entry files
        6. Running webpack
        7. Setting up Redux
      2. The template code
    3. Implementing actions and action creators
      1. Separating action types
        1. ES2015 - import/export
      2. Introducing action creators
        1. ES2015 - arrow functions
        2. ES2015 - import/export
      3. Code example
    4. Implementing reducers
      1. Defining/importing action types
      2. Defining action creators
      3. Writing the posts reducer
        1. The main structure of a reducer
        2. ES2015 - using destructuring and the rest operator to parse the action
        3. Handling CREATE_POST – creating a new post
        4. Handling EDIT_POST – editing posts
        5. Testing out our reducer
      4. Writing the filter reducer
      5. Combining reducers
        1. Testing out the full reducer
      6. Code example
    5. The store – combining actions and reducers
      1. Creating the store
      2. Subscribing to state changes
      3. Dispatching actions
      4. Rendering the user interface
        1. Creating sample data
        2. Handling the user input
      5. Code example
    6. Summary
  4. Combining Redux with React
    1. Why React?
      1. The principles of React
    2. Setting up React
      1. Rendering simple text
      2. Rendering with JSX
        1. Setting up JSX
        2. Using JSX
      3. Example code
    3. First steps with React
      1. Creating a simple React element
      2. Creating a static React component
        1. Functional components
        2. Using components
        3. Example code
      3. Class components – dynamic React components
        1. Creating a static class component
        2. Creating a dynamic class component
          1. Setting the initial state
          2. React life cycle methods
          3. Updating the state
          4. Example – dynamic React component with timer
        3. Example code
    4. Connecting React to Redux
      1. Presentational versus container components
      2. Writing presentational components
        1. Post component
        2. PostList component
        3. Example code
      3. Writing container components
        1. Implementing our own container component
          1. Example code
        2. Using React-Redux bindings to create a container component
          1. Setting up React-Redux
          2. Using React-Redux to create a container component
          3. Using selectors
          4. Example code
    5. Building an application with Redux and React
      1. The goal
      2. Project structure
      3. Defining the application state
        1. Users state
        2. Posts state
        3. Filter state
      4. Defining action types and action creators
        1. Defining action types
        2. Defining action creators
          1. User action creators
          2. Post action creators
          3. Filter action creators
      5. Implementing reducers
        1. Users reducer
        2. Posts reducer
        3. Filter reducer
        4. Root reducer
      6. Setting up the Redux store
      7. Code example – Redux-only application
      8. Implementing the user interface
        1. Implementing presentational components
          1. User component
          2. Post component
          3. Timestamp component
          4. PostList component
          5. Filter component
          6. FilterList component
        2. Implementing container components
          1. ConnectedPostList component
          2. ConnectedFilterList component
        3. Implementing the App component
        4. Using <Provider>
        5. Rendering the App component
      9. Code example – React/Redux application
      10. Further tasks
    6. Summary
  5. Combining Redux with Angular
    1. Redux with Angular 1
      1. Setting up Angular 1
        1. Code example
      2. Creating a basic Angular 1 application
        1. Defining the module and controller
        2. Code example
      3. Setting up ng-redux
        1. Redefining the controller
        2. Dispatching actions from the user interface
        3. Code example
    2. Redux with Angular 2+
      1. Setting up Angular 2+
      2. Setting up @angular-redux/store
      3. Code example
    3. Summary
  6. Debugging a Redux Application
    1. Integrating Redux DevTools
      1. Installing Redux DevTools
      2. Creating a DevTools component
      3. Connecting DevTools to Redux
        1. Using the DevTools.instrument() store enhancer
        2. Rendering DevTools
        3. Implementing the persistState() store enhancer
          1. Using multiple store enhancers
          2. Implementing a simple session key provider
          3. Do not re-dispatch on refresh
          4. Using the store enhancer
      4. Excluding Redux DevTools in production
        1. Injecting the NODE_ENV environment variable with webpack
        2. Adding new build scripts for production and development
        3. Separating the production store from the development store
          1. Implementing the development store
          2. Implementing the production store
          3. Importing the correct store
          4. Importing and using configureStore()
        4. Only loading the DevTools component in development mode
        5. Running in production/development mode – example code
    2. Setting up hot reloading
      1. Hot reloading React components
      2. Hot reloading other code with webpack
      3. Hot reloading Redux reducers
      4. Testing out hot reloading – example code
    3. Using Redux DevTools
      1. DockMonitor
        1. Setup
        2. Properties
      2. LogMonitor
        1. Setup
        2. Usage
        3. Properties
      3. Inspector
        1. Setup
        2. Usage
        3. Properties
      4. SliderMonitor
        1. Setup
        2. Usage
        3. Properties
      5. ChartMonitor
        1. Setup
        2. Properties
      6. Other monitors
    4. Summary
  7. Interfacing with APIs
    1. Setting up the backend
      1. The backend API
        1. GET /api
          1. Example output
        2. GET /api/posts
          1. Example output
        3. GET /api/posts/:id
          1. Example output
        4. POST /api/posts
          1. Example request
          2. Example output
        5. POST /api/posts/:id
          1. Example request
          2. Example output
        6. GET /api/users
          1. Example output
        7. GET /api/users/:username
          1. Example output
        8. POST /api/users
          1. Example request
          2. Example output
        9. POST /api/users/:username
          1. Example request
          2. Example output
    2. Handling asynchronous operations with Redux
      1. Dispatching multiple actions from an action creator
        1. Defining action types
        2. Creating an asynchronous action creator
        3. Handling asynchronous action creators via middleware
          1. Setting up redux-thunk middleware
    3. Pulling data from an API into the Redux store
      1. Extracting boilerplate code
      2. Pulling posts from the API
      3. Pulling users from the API
        1. Fetching a single user
        2. Fetching users when fetching posts
      4. Handling loading state
        1. Implementing the reducer
        2. Implementing the component
        3. Using the component
      5. Handling error state
        1. Implementing the reducer
        2. Implementing the component
        3. Using the component
      6. Example code
    4. Sending notifications to an API via Redux
      1. Using asynchronous action creators
        1. Creating users via the API
        2. Creating posts via the API
      2. Example code
    5. Summary
  8. User Authentication
    1. JSON Web Tokens (JWT)
      1. JSON Web Token structure
        1. Header
        2. Payload
        3. Signature
        4. Token
      2. Using JSON Web Tokens
    2. Implementing token authentication
      1. Backend API
        1. POST /api/login
          1. Example request
          2. Example output
        2. POST /api/users
          1. Example request
          2. Example output
        3. POST /api/posts
          1. Example request
          2. Example output
        4. Secured routes
      2. Storing the token in the Redux store
        1. Defining the action types and action creator
        2. Creating the reducer
        3. Dispatching login action in the component
        4. Testing out the login
      3. Checking whether the user is logged in
        1. Separating the header
        2. Hiding/showing components when the user is logged in
        3. Showing the currently loggedin user
      4. Sending the token with certain requests
      5. Example code
    3. redux-auth
    4. Summary
  9. Testing
    1. Setting up Jest
      1. Testing automatically on every file change
      2. Checking code coverage
      3. Example code
    2. Using Jest
      1. Using test and describe
      2. Matchers
        1. .toBe or .not.toBe
        2. Truthiness
        3. Numbers
        4. Strings
        5. Arrays
        6. Exceptions
        7. All matchers
      3. Testing asynchronous code
        1. Callbacks
        2. Promises
          1. .resolves/.rejects
      4. Setup and teardown
        1. Running every time before/after each test
        2. Running once before/after all tests
        3. Scoping
      5. Mocking
        1. .mock property
        2. Return values
        3. Implementations
        4. Special matchers
    3. Testing Redux
      1. Synchronous action creators
      2. Reducers
        1. Testing initial state
        2. Initializing state with beforeEach()
        3. Testing the setFilter action
        4. Testing the clearFilter action
      3. Reducers with async actions
      4. Asynchronous action creators
        1. Testing successful requests
        2. Testing failing requests
      5. Example code
      6. Other tests
    4. Testing React components
    5. Summary
  10. Routing
    1. Creating a simple router
      1. Defining the action types and action creator
      2. Creating the reducer
      3. Creating the page components
        1. Creating the MainPage component
        2. Creating the AboutPage component
      4. Creating the Router component
        1. Connecting the Router component to Redux
        2. Using the Router component
      5. Creating the Navigation component
        1. Connecting the Navigation component to Redux
        2. Using the Navigation component
      6. Code example
    2. Using a routing library
      1. Introducing react-router
        1. Static routing
        2. Dynamic routing
          1. Nested routes
          2. More routing
      2. Using react-router
        1. Installing react-router
        2. Defining the <Router> and <Route>
        3. Defining the <Link>
        4. Trying out the router
        5. Marking the currently selected link
      3. Using react-router with Redux
        1. Do I need to connect my router to Redux?
        2. Why deeply integrate my router with Redux?
      4. Example code
    3. Using react-router-redux
      1. Installing react-router-redux
      2. Using the routerMiddleware
      3. Using the routerReducer
      4. Using the ConnectedRouter
      5. Testing out the router
      6. Navigating by dispatching actions
      7. Example code
    4. Summary
  11. Rendering on the Server
    1. Why render on the server?
      1. Current process to load the page
      2. Using server-side rendering
    2. Preparing for server-side rendering
      1. Using the isomorphic-fetch library
    3. Implementing server-side rendering
      1. Handling the request/routing
        1. Emulating the Redux store and browser history
        2. Initializing the Redux store
        3. Using react-router to decide which page to render
        4. Handling react-router redirects
      2. Injecting rendered React components into the index.html template
      3. Injecting the preloaded Redux store state
      4. Rendering the template file
      5. Using the preloaded Redux store state
      6. Caching the index page
    4. Performance improvements
    5. Summary
  12. Solving Generic Problems with Higher-Order Functions
    1. Making functions pure
      1. Simple side effects
      2. No side effects
      3. Other side effects
      4. Side effects and Redux
    2. Creating higher-order functions
      1. Functions as arguments
      2. Functions as results
    3. Solving generic problems with Redux
      1. Higher-order reducers
      2. Higher-order action creators
      3. Higher-order components
    4. Implementing generic undo/redo Redux
      1. Setting up the counter application
      2. Looking at the counter reducer
      3. Implementing undo/redo in the counter application
        1. Defining the action types
        2. Defining the action creators
        3. Defining the new state
        4. Rewriting the counter reducer
          1. Handling the counter-related actions
          2. Handling the undo/redo actions
        5. Creating undo/redo buttons
        6. Trying out undo/redo
        7. Example code
      4. Implementing a generic undo/redo higher-order reducer
        1. Defining the undoable higher-order reducer
        2. Defining the initial state
          1. Problems with our previous solution
          2. A new kind of history
          3. Defining a generic initial state
        3. Handling generic undo/redo actions
          1. Defining the action types
          2. Defining the action creators
          3. Implementing the enhanced reducer
          4. Handling the undo action
          5. Handling the redo action
          6. Handling other actions (updating the present state)
          7. Removing undo/redo logic from the counter reducer
          8. Wrapping the counter reducer with undoable
          9. Problems with our simple undoable higher-order reducer
        4. Example code
      5. Implementing redux-undo
        1. Installing redux-undo
        2. Wrapping our reducer with undoable
        3. Adjusting the state selector
        4. Importing the undo/redo actions
        5. Debug mode
        6. Example code
    5. Summary
  13. Extending the Redux Store via Middleware
    1. What is middleware?
      1. Express middleware
      2. Creating our own middleware pattern
        1. Sketching out the API
        2. Creating the Middleware class
          1. Defining the run method
          2. Defining the use method
        3. Using our own middleware pattern
      3. Example code
    2. Using the Redux store middleware
      1. Implementing logging
        1. Manual logging
        2. Wrapping the dispatch function
        3. Monkeypatching the dispatch function
        4. Hiding monkeypatching
        5. Getting rid of monkeypatching
        6. Applying middleware
      2. Implementing Redux middleware
        1. Creating a middleware folder
        2. Logging middleware
        3. Error reporting middleware
        4. Applying our middleware to the Redux store
      3. Example code
      4. Thunk middleware
    3. Final tips and tricks
      1. Designing the application state
        1. Using indices
        2. Normalized state
        3. Organizing data in the application state
      2. Updating an application state
        1. Updating nested objects
          1. Common mistake 1 - New variables that point to the same objects
          2. Common mistake 2 - Only making a shallow copy
          3. Correct approach - Copying all levels of nested data
        2. Updating arrays
          1. Inserting items
          2. Removing items
          3. Updating items
          4. Mutating copies
        3. Using libraries
    4. Summary

Product information

  • Title: Learning Redux
  • Author(s): Daniel Bugl
  • Release date: August 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781786462398