Redux completes the missing piece of the React framework, and is used at the core of React for most complex React projects. In this course, we’ll be focusing on leveraging the Redux framework to impose better engineering on React applications. Redux is an implementation of FLUX, which is a pattern for managing application state in React. Redux brings a clean and testable design to the table using a purely functional approach.
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 toastr 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. At the end, you will focus on testing different libraries for our React components, and then test our asynchronous action creators and reducers.
About The Author
Understanding the fundamental components of a client application is essential to success in modern frameworks.
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.
Before diving into building applications with Redux, we should get a fundamental understanding of how we implement and organize different concerns.
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.
As reducers grow, using a switch statement becomes harder to maintain, and immutability becomes harder to enforce.
As a single-page app acquires more pages, managing them all in the same location becomes impractical.
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.
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.
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.
Pagination is one of the most common problems to occur in a user interface. We can make it simple and straightforward by leveraging Redux.
Pagination is easy to implement in Redux, but a fully featured library will prevent you from writing the same code in multiple projects.
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.
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.
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.
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.
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.
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.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.