Redux Recipes

Develop complex and maintainable web applications using Redux

Created byPackt Publishing

Last updated 3/2019

English

English [Auto],

What you'll learn

Build an application and understand the concept of state management in general
Get to know in detail the different recipes for applying Redux into your application
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
Write unit tests in Redux for different functions, actions, and reducers

Course content

6 sections • 41 lectures • 2h 59m total length

The Course Overview4:15
This video gives an overview of the entire course.
Understanding Redux Through a Non-Technical Example2:07
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
Adding Redux to Application1:27
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
First Redux Application5:06
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
Restore State from Store1:12
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
Firing Different Actions2:46
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
Handling Different Actions in Reducers3:30
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
Subscribing to Redux State1:38
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
Understanding createStore() and reducers4:57
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
Splice Reducers and Combine Them5:20
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
Summary1:20
Making a recap for everything we did during this section about each part concisely.

Installing React and Creating a React App1:46
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
Building a Simple React App4:36
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
Understand How Components Share State Without Redux4: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
Installing and Configuring React-Redux4:50
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
Connecting Components with Redux3:06
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
Dispatching Actions3:07
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
Clean Up and Some Tips4:43
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
PropTypes2:04
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
Summary1: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

Understanding Middlewares3:12
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
Building a Simple Logging Middleware5:39
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
Integrating ReduxDevTools3:27
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
Time Travel Debugging with ReduxDevtools4:36
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
Summary0:41
Summarize all the learnt lessons from this section.

Extending the State7:44
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
Pushing Data to a Nested State11:29
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
Updating and Deleting Nested Data in State10:42
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,
Implementing a Single Search Field10:08
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
Summary0:44
Summarize all the learnt lessons from this section.

HTTP Requests in Redux4:36
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
Integrating Redux-Thunk9:03
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
Using Promises to Fire Actions Before and After HTTP Requests4:33
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
Persisting State5:11
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
Summary0:49
Summarize all the learnt lessons from this section.

Prepare Project for Unit Testing6:05
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
Write Tests for Action Creators3:03
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
Writing tests for Async Actions with Moxios and Redux Mock Store8: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 Reducer Functions7:09
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
Testing React Connected Components with Enzyme8:07
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
Summary1:24
Summarize all the learnt lessons from this section.

Requirements

Basic knowledge of JavaScript is required for this course.

Description

State management is absolutely critical in providing users with a well-crafted experience with minimal bugs. Redux provides a solid, stable, and mature solution to managing state in your React application.

In this course, 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 Author

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 video is for JavaScript developers who want to create high performing web applications with Redux.

Redux Recipes

What you'll learn

Explore related topics

Course content

Up and Running with Redux11 lectures • 34min

Integrating Redux with React9 lectures • 30min

Middlewares in Redux5 lectures • 18min

Working with Deeply Nested Data5 lectures • 41min

Handling Server Data5 lectures • 24min

Unit Testing Redux6 lectures • 34min

Requirements

Description

Who this course is for: