by Sam Slotsky | Publisher: Packt Publishing | Release Date: December 2016 | ISBN: 9781787125810

Take your web applications to the next level by leveraging the power of Flux architecture using the Redux framework About This VideoGet to know the essentials of building single page applications with React and ReduxQuickly and elegantly solve common problems including form submission and list paginationLeverage powerful libraries to test every aspect of your client's applicationIn DetailRedux 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.The course 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 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.

1. Chapter 1 : Implementing the FLUX pattern with Redux
   • The Course Overview 00:02:48
   • The Anatomy of a Client Application 00:10:01
   • Understanding FLUX 00:06:01
   • Introducing Redux 00:05:35
2. Chapter 2 : Building Applications with Redux
   • Integrating Redux 00:03:10
   • Watching the Dispatch Log 00:05:44
   • Divorcing the Switch Statement 00:06:02
3. Chapter 3 : Designing Single Page Apps
   • Toggling Views the Hard Way 00:03:14
   • Organizing the Application State 00:03:49
   • Switching Pages with ReactRouter 00:06:57
4. Chapter 4 : Paginating Server Data
   • Fetching Data with Axios 00:07:12
   • Displaying Datatables in React 00:06:54
   • Implementing Basic Pagination Controls 00:08:25
   • Introducing Violet-Paginator 00:06:00
5. Chapter 5 : Submitting Forms
   • Managing Form State in Redux 00:04:46
   • Form Submission, Redirection, and Error Handling 00:06:52
   • Introducing ReduxForm 00:04:29
   • Client-Side Validations in ReduxForm 00:07:07
6. Chapter 6 : Testing React-Redux Applications
   • Testing Components with Enzyme 00:06:04
   • Testing Asynchronous Action Creators 00:05:51
   • Testing Reducers 00:05:55