Beginners Guide to Redux Framework
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2 students enrolled

Beginners Guide to Redux Framework

Develop complex and maintainable web applications using Redux
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2 students enrolled
Created by Packt Publishing
Last updated 3/2019
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build rich client applications with quality engineering principle.
  • Find out how to test asynchronous action creators and reducers.
  • Discovering the libraries that solve the most common problems.
  • Build a middleware and also find out to debug with ReduxDevtools.
  • Work with Deeply Nested Data by using real-world data as an example.
  • Design your Redux architecture before implementation and know the best practices to structure folders/files.
Course content
Expand all 62 lectures 05:02:41
+ Learning Redux
21 lectures 02:02:46

This video gives overview of the entire course.

Preview 02:47

Understanding the fundamental components of a client application is essential to success in modern frameworks.

  • Review a simple jQuery app and recall the days when data and display were essentially equivalent

  • See how data binding frameworks like Knockout improved our lives with a good abstraction for managing data on the client

  • Contrast with React's abstractions for data and events, and observe how the display component is also more manageable

The Anatomy of a Client Application
10:00

As React applications grow, there arises a clear need for a consistent and scalable way to manage your application state. The standard way to achieve this is to follow the FLUX pattern.

  • Get a high-level overview of FLUX in order to understand the basic principles

  • Create your data store, define the possible transformations, and expose functions that provide access to the store

  • Wrap your React components in a Provider that subscribes to the store and re-renders when a change occurs

Understanding FLUX
06:01

Before diving into building applications with Redux, we should get a fundamental understanding of how we implement and organize different concerns.

  • Review how the store is created using reducers, which are identical to how we managed our application state in our own FLUX implementation

  • Review a connected component to see how state gets injected as component props

  • Define action creators, bind them to the dispatch, and inject them as component props to more closely mimic FLUX

Introducing Redux
05:35

Take an existing React client and turn it into a Redux application.

  • Move all of your state management into a reducer

  • Initialize your data store and feed it to the provider

  • Inject action creators and application state into your connected components

Preview 03:10

A large FLUX application has lots of actions being dispatched from many places in a deep component tree, making bugs difficult to track down. Redux DevTools will help light the way.

  • Install Redux DevTools and connect it to your app

  • Watch the store being updated as actions are dispatched

  • Use it to track down elusive bugs

Watching the Dispatch Log
05:44

As reducers grow, using a switch statement becomes harder to maintain, and immutability becomes harder to enforce.

  • Write a function that allows reducers to use mappings

  • Replace your function with the redux-resolver package

  • Enforce immutability using Immutable.js

Divorcing the Switch Statement
06:01

Writing a single-page app means using nothing but JavaScript to update the page when navigation links are clicked. It's worth it to see what it takes to do this yourself before reaching for a more robust, pre-made solution.

  • Add the views, actions, and reducer handlers for a second page

  • Render different pages based on the value of a variable

  • Add links that update the page variable when clicked

Toggling Views the Hard Way
03:14

As a single-page app acquires more pages, managing them all in the same location becomes impractical.

  • Move pages and relevant components, actions, and reducers into subfolders

  • Use combineReducers to assemble reducers into a single store

  • Update connected components to use relevant parts of the application state

Organizing the Application State
03:49

A home-cooked routing implementation might do the trick early on, but it gets hard to manage when things get more complex, and there's no need to reinvent a perfectly good wheel.

  • Using react-router, define routes that render your different pages.

  • Use react-router-redux to sync your history with the redux store

  • Use the built-in Link component or build something custom

Switching Pages with ReactRouter
06:56

We want to retrieve data from the server in a consistent and reliable way. Promises provide a much better abstraction for this than the traditional callback model.

  • Using axios, set up a module responsible for all server communication

  • Hook up middleware, allowing the dispatch to accept promises

  • Call asynchronous action creators to fetch data when the component loads

Fetching Data with Axios
07:11

After fetching data, the next step is to display it. Apps will often have multiple list views or grid views with a consistent look and feel across them all. It's therefore helpful to have an easy and reusable way to display lists of records.

  • Use promise handlers to stash incoming server data into a reducer

  • Inject the data into your component and render it into a datatable

  • Refactor the datatable to be generic and reusable

Displaying Datatables in React
06:54

Pagination is one of the most common problems to occur in a user interface. We can make it simple and straightforward by leveraging Redux.

  • Compose complex actions from simple pagination actions and the fetch function

  • Read state from multiple reducers to add pagination to the list

  • Create a higher order reducer function to reuse pagination logic

Implementing Basic Pagination Controls
08:25

Pagination is easy to implement in Redux, but a fully featured library will prevent you from writing the same code in multiple projects.

  • Include the pagination reducer and configure server communication details

  • Use library state and actions to drive custom datatable and pagination components

  • Use the library's built components for datatables and rich pagination

Introducing Violet-Paginator
05:59

Almost every web client has forms, and JavaScript libraries offer different solutions for submitting them via AJAX. In react-redux, we solve it like any other problem: with components, actions, and reducers.

  • Create reducer and action logic to manage the form fields

  • Build a component for displaying form fields and updating their state

  • Connect a component to the Redux store and wire the form together

Managing Form State in Redux
04:45

Asynchronous form submission is another way by which single-page apps can improve on user experience. Leverage Redux and other libraries to elegantly handle both success and failure scenarios.

  • Submit form data to the server, displaying a toastr notification on failure

  • For successful submissions, display a notification and redirect to another page

  • Improve the failure experience by highlighting invalid form fields

Form Submission, Redirection, and Error Handling
06:52

Forms in Redux are easy, but we don't want to rewrite the code with every new project. ReduxForm is a library that uses a reducer to manage our form state for us.

  • Decorate form components with reduxForm() to inject form state.

  • Wrap form input components in a Field for automatic field injection

  • Throw a SubmissionError when server side validation fails.

Introducing ReduxForm
04:28

To improve user experience, we want to prevent submission of invalid data as much as possible. ReduxForm allows you to specify a validate function, which returns information indicating which fields have errors.

  • Define a simple validation function to collect error information

  • Update form components so that invalid data can't be submitted

  • Iterate on validation code to make it reusable across multiple forms

Client-Side Validations in ReduxForm
07:07

All aspects of a react-redux app can and should be tested. React's in-house utilities for testing components leave some things to be desired. Enzyme.js provides a simple and powerful interface to get your components properly covered.

  • Set up a virtual DOM to get enzyme up and running

  • Assert that components produce correct output depending on props

  • Simulate user interactions and assert that event handlers are executed

Testing Components with Enzyme
06:03

In redux, our actions contain a great deal of our application logic, making them extremely important to test. But asynchronous actions that make API calls can also be somewhat tricky to tackle.

  • Use axios-mock-adapter to mock API calls from axios

  • Use redux-mock-store to dispatch the asynchronous action under test

  • Verify that the success and failure scenarios behave as expected

Testing Asynchronous Action Creators
05:51

A great deal of the logic in a Redux application is found in the reducers, making them absolutely crucial to test. Fortunately, this is very easy to achieve due to the pure functional nature of Redux.

  • Save the important state in the reducer and reflect it in the UI

  • Verify that the reduce returns the initial state by default

  • Verify that your actions update the state according to expectations

Testing Reducers
05:54
+ Redux Recipes
41 lectures 02:59:55

This video gives an overview of the entire course.

Preview 04:15

Understanding the Redux terms such as store, state, action, reducers, and so on.

  • Start with a drawing explaining a non-technical example of Redux usage

  • Fallback to Redux and rename everything to match the Redux echo system

  • Revise the whole process again with Redux terms

Understanding Redux Through a Non-Technical Example
02:07

Including Redux as a file referenced after download into html file and make sure that everything is wired up with the browser for previewing.

  • Get into the Redux website and preview the different ways of downloading redux

  • Pick the package way and download the redux.min.js file

  • Include the file into the html file and wire it up

Adding Redux to Application
01:27

Creating the first Redux application by creating store using the createStore function and create the reducer and first action to be dispatched to the store.

  • Create a reducer function to be used first without redux

  • Create Redux store using createStore function and pass reducer function to it

  • Create and dispatch action and handle it in the reducer function

First Redux Application
05:06

Learning how to restore the whole state from the store using getState function in the store instance.

  • Using the store.getState it returns the whole state

  • Display the state using console.log instead of console login the action

Restore State from Store
01:12

Creating other actions and dispatch them the same way like the first action and add payloads for changes.

  • Create new action with action types and adding the proper payload

  • Dispatch the actions using store.dispatch function

Firing Different Actions
02:46

Handling the created action in the previous video in the reducer function using if/else and make the required changes.

  • Creating extra if/else statements to handle different action types

  • State make some changes in the state based on the sent action and payload

  • Returning a new state with the change without mutation

Handling Different Actions in Reducers
03:30

Registering to get changes regularly from store once the state has any changes using store.subscribe.

  • Delete all the console.log commands for the getState function

  • Create only once a subscribe call before any dispatch actions

  • Change the content of the subscribe to have getState inside it

Subscribing to Redux State
01:38

Making some changes in the example by adding a default state as a second parameter in the createStore function.

  • Move the whole code from the html file script tag into a separate file

  • Change the implementation of reducer to use switch instead of if/else

  • Make some more changes into the reducers by accepting the default state from store instead of default param

Understanding createStore() and reducers
04:57

Splicing the reducer function into separate reducers each one can manage only a small part of the state and we can combine them again into a root reducer and pass it to the createStore function.

  • Add a new part in the project for users into the state, action, and reducer to be tested

  • Make separate reducers for orders and another for users

  • Combine both reducers into one using combineReducers function and pass it to createStore function

Splice Reducers and Combine Them
05:20

Making a recap for everything we did during this section about each part concisely.

Summary
01:20

You’ll get an introduction to section 2 first and the goal of the section.

Then install a fresh version of react app using the create-react-app cli tool and installing Boot Strap to be used for styling.

  • Install react and create-react-app tool and bootstrap as well using npm and npx

  • Create the first react app and run it in the browser

  • Browse the files of the created project to understand how it works, and add bootstrap to the project

Preview 01:46

We need a working example first written in react that is not working with Redux to understand it first.

  • Start the process from the app.js file to add some state and show it in the render function

  • Then cope/paste the components we use in the example to components folder

  • The cope/paste the rest of the code to the right places and make sure that everything is wired up

Building a Simple React App
04:36

The aim here is to explain how the state is working in the current implementation, as its parent child relation in the state.

  • Open the app.js file and check the state and make some changes

  • Open the orders list component to see if it’s changed or not

  • Check the add order function, how it work and how it affect the state in the parent

Understand How Components Share State Without Redux
04:36

The aim is to introduce and install the react-Redux library which help in implementing the Redux in the react app easily, the introduction of moving the project to redux.

  • Install the react-Redux library using npm

  • Introduce the react-Redux in the project by setting up the Redux store in react

  • Introduce converting the project to use redux

Installing and Configuring React-Redux
04:50

Here we want to connect the components with Redux state, using connect function coming from react-Redux lib.

  • Start by the app component to be connected to the state to retrieve the order

  • Create reducer to return the initial state as default

  • Map state to props to view the initial state in the list of orders

Connecting Components with Redux
03:06

We want here to make some changes in the state by dispatching actions, we created a new folder for actions and then start dispatching after mapping dispatch to props in the components in the connect function.

  • Create actions folder and create types.js file to hold all the actions times as constants and export them

  • Create action for orders and use the types from types.js file and handle the action in the reducer

  • Import the action creator to the component and map dispatch to props to be used as props

Dispatching Actions
03:07

We have still some mess from the implementation before using redux, in this video we need to clean up the mess by deleting all the unneeded code and implement the missing features.

  • Implement the delete function of orders that make us create new action and new reducer

  • Edit the add order reducer to include auto generated id to be used during the delete function

  • Delete all the not needed code and the component state in app.js and make everything use Redux store instead

Clean Up and Some Tips
04:43

In this video we need something that double check after us for the props and their types, so we are using prop types to check the type of the props and if they are required.

  • Import proptypes from prop-types

  • Add the component propTypes object with the props for example the orders as array and the deleteOrder as function

  • Added the isRequired flag to set that prop as required and tested in the browser to see the warning message

PropTypes
02:04

This is simply a summary and revision of the section to make sure that we achieved the required goal.

  • Preview list of learnt stuff and talking briefly about each of them

Summary
01:04

Introducing the middleware, and explaining where exactly they are executed.

  • What is the middleware

  • Explain the right position of the middleware in the process

  • Create a function that play the role of middleware

Understanding Middlewares
03:12

We need to create a custom middleware to log the state after dispatching actions.

  • Create a function for logger middleware to log the action type and next state

  • Wrap the middleware inside high-order function

  • Create another middleware and use applyMiddleware and Cleaning up code

Building a Simple Logging Middleware
05:39

We need to integrate Redux devtools into our project.

  • Install the Redux devtools extension for chrome

  • Explain the enhancers and how to combine them with the middlewares using composer

  • Use the provided function from the extension to run the extension

Integrating ReduxDevTools
03:27

Try all the options of using the Redux Devtools extension and try the time travel debugging.

  • Start by adding some orders and delete some to make some history

  • Explore all panels by selecting different actions from the list and check the details of action and state and difference

  • Check the time travel debugging, run the time travel debugging with different speeds

Time Travel Debugging with ReduxDevtools
04:36

Summarize all the learnt lessons from this section.

Summary
00:41

Show the old application and explain that we are going to make it more complex.

  • Create the customers component and add it to the app component

  • Create the Redux boilerplate code, action, reducer, and connect it to the component

  • Add logic to switch the selected customer

Extending the State
07:44

We need to push data into the new more complex state, and change the layout to show it to the user.

  • Change the layout and add a new column using the twitter bootstrap classes

  • Create the backlog component with actions, reducers, and connect it

  • Load the backlog order and add styling to it

Pushing Data to a Nested State
11:29

Modify the nested state, by editing or deleting data from it.

  • Make the counter component read from the backlog instead of the current order items

  • Added some validation for loading or submitting new order

  • Deleting order from the backlog, reset form after submitting,

Updating and Deleting Nested Data in State
10:42

We need to have a search box, to search for orders.

  • Create a search box component and add actions, reducers and connect it with redux

  • Create the search box itself and add bootstrap classes, added actions and binding

  • Implement the clear button to clear search

Implementing a Single Search Field
10:08

Summarize all the learnt lessons from this section.

Summary
00:44

We need to figure out how to make http requests in react in general.

  • Pick the customers reducer and remove the default customers to make it comes from http request

  • Make an HTTP request to an endpoint to get some data using axios, console log them to make sure that they come correctly

  • Introduce solutions for handling async http requests in Redux

HTTP Requests in Redux
04:36

We need a way to handle actions that has an async event like http requests, so we need to apply redux-thunk.

  • Install required lib, redux-thunk and add it as a middleware in the store

  • Convert the action creator that has http request to get the redux-thunk style

  • Handle the fetch in the reducer for start, success, and failure

Integrating Redux-Thunk
09:03

We need another concise way to handle the async action creator, promise middleware is a perfect option for that.

  • Install required lib which is redux-promise-middleware And configure it in the store

  • Convert the async action creator to use the style of promise middleware and clean up the unnecessary code

  • Refactor the reducer to handle the pending, fulfilled, and rejected actions based on the promise middleware

Using Promises to Fire Actions Before and After HTTP Requests
04:33

We need a way to persist data not to request it from the server on reload every time.

  • Add initial state to the createStore function, with getStorage to get the persisted data from localStorage

  • Write the get and set storage to save the data after coming from server

  • Test the data and loading time before and after implementing persistance

Persisting State
05:11

Summarize all the learnt lessons from this section.

Summary
00:49

We need to install the required tools for testing.

  • Show that create-react-app install jest for us

  • Should how jest be working and show the app.test.js example

  • Introduce the vscode extension that might help some people without running test manually

Prepare Project for Unit Testing
06:05

We need to write our first test and testing a simple action creator.

  • Pick the search action and learn who to create the first file

  • Import action and types and write the assertion function of jest

  • Run the test in the terminal and see it work in action

Write Tests for Action Creators
03:03

We have an async action using axios and promise middleware that cannot be tested the regular way.

  • Install required tools moxios and Redux mock store, and explain the reason for that, and create mock store

  • Write test to call the fetchCustomer action creator and get the dispatched action for comparison

  • Test if the action pending and fulfilled are dispatched in order or not and fi it

Writing tests for Async Actions with Moxios and Redux Mock Store
08:03

We need to write test for the reducer function.

  • Pick the customers reducer and import it into a test file

  • Test intial state, and customer fulfilled and customer error

  • Make some errors and fix them and re-run the test until succeed

Writing Tests Reducer Functions
07:09

We need to test react component, but it cannot be tested normally when it’s connected.

  • We export the component class to be tested in the test file

  • Install and import enzyme and enzyme adapter, and configure the Redux mock store

  • Test the component if it renders the write way and test if add order is being called on submit

Testing React Connected Components with Enzyme
08:07

Summarize all the learnt lessons from this section.

Summary
01:24
Test Your Knowledge
5 questions
Requirements
  • Basic knowledge of Redux would be advantageous, however not mandatory.
Description

Redux completes the missing piece of the React framework and is used at the core of React for most complex React projects. It brings a clean and testable design to the table using a purely functional approach and provides a solid, stable, and mature solution to managing state in your React application.

With this practical oriented course, you will first start with basics of how React applications are organized compared to other JavaScript applications, principles of the Flux architecture & much more. Then you will learn, to build a simple React application and rewrite it with Redux, Connecting the boundary of your client application with well-defined server communication. Moving further, you'll also explore advanced state management techniques, router integration, that helps you while developing your applications.

By the end of this course, you will be develope complex web applications using Redux with deep knowledge of Redux framework.

Contents and Overview

This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Learning Redux begins with the basics of React development, where you will get a better understanding of how React applications are organized compared to other JavaScript applications. Then you will learn the principles of the Flux architecture before diving into one of its most popular implementations: Redux. You’ll build a simple React application and rewrite it with Redux. By the end of this section, our Redux code will be doing all the work so that our React components can be strictly presentational. Moving on, we’ll turn our simple client into a single page application. We’ll use react-router to allow different URLs to render different pages, and you’ll see how to break up our application state into groups of related data. We’ll focus on retrieving lists of records from the server and paginating them, starting by leveraging the Redux framework to implement our own pagination. Then we’ll replace most of the code we’ve written so far, with a third-party package that neatly solves the problem of form submission for us. After that, you’ll submit the form with axios, use react-router to redirect on success, and leverage toaster to display error notifications. Finally, we’ll rip out most of our code and replace it with a popular library that’s built to manage form state. In the end, you will focus on testing different libraries for our React components and then test our asynchronous action creators and reducers.

The second course, Redux Recipes you'll explore advanced state management techniques, router integration, and other common problems that you might encounter while developing your applications. The recipe-based approach allows you to quickly identify your problem and find a solution to it. This course also consists of various recipes that will help you to understand different test-case scenarios created in Redux. Once you are well-acquainted with Redux, the course will explicitly show you how they work in developing a consistent application with React.

About the Authors:

  • Sam Slotsky is a software engineer and saxophonist originating from Sioux City, IA. He attended the University of Iowa for Computer Science and Music and is currently employed by Ackmann & Dickenson, Inc. of Minneapolis, specializing in back-end web applications, databases, and JavaScript. Additionally, Sam has authored and contributed to open source packages for use with the React, Redux, Knockout, and Meteor framework. Cooking and playing chess are his favorite pastime activities.

  • Medhat Dawoud is a Front-end Engineer with over a decade of experience in web applications. He has successfully delivered a lot of web applications implemented in different programming languages and in different industries including fintech. Early in his career, he became a fully dedicated Front-end Engineer. He also has experience with Node.js, as he loves everything that JavaScript touches. Throughout his career, he worked in almost everything that counts as a front-end technology including JQuery, Backbone.js, Angular.js, React, Vue, and Angular 2+ since it was in RC4. He is also experienced with the stack behind each framework including ES6+, TypeScript, Babeljs, Redux, RxJS, and other UI technologies including HTML5, CSS3+, Sass, and Bootstrap 4. He has a lot of experience of teaching technology to people through public speaking, screencasting, crash courses, and sometimes blog posts. He is very active online, making technical tutorials on his channel on YouTube, Twitter, and LinkedIn.

Who this course is for:
  • The course is for Application developers, JavaScript developers and who are willing to utilize the power of Redux and build real-time apps with React & rich client applications.