Beginners Guide to Redux Framework
- 5 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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,
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
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
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
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
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
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
- Basic knowledge of Redux would be advantageous, however not mandatory.
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.
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 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: