HOW TO LEARN X WITH REACT REDUX?
Before we get started, one thing should be clear: This React Redux tutorial for beginners only involves React, Redux and a bit of Redux’s ecosystem. It doesn’t involve all the nitty gritty details, advanced techniques, and opinionated ways of doing things in Redux, because that’s explained in-depth in my other book called Taming the State in React. Instead, it’s a straight forward and hopefully simple React Redux tutorial.
There are many people looking for a tutorial with another complementary solution (Webpack, TypeScript, React Router, GraphQL) on top of React and Redux, but that’s not what this tutorial is about. Learning Redux after you have learned React is the one step in a step by step learning process you may be looking for. My advice for people looking for a tutorial that includes another complementary solution on top of React and Redux:
- go through my book The Road to learn React
- afterward go through this React Redux tutorial (and maybe through the book too)
- then learn the third complementary solution (e.g. Webpack) separately
- apply your learnings for the complementary solution in this example application from this tutorial
My recommendations on how to learn these other solutions on top of React Redux:
- React, Redux & Webpack: In this tutorial, you will use create-react-app to setup your React application. It leaves out all the tooling (Webpack, Babel, …) to keep you focused on Redux in React. If you want to learn how to use Webpack in React Redux applications, checkout this React + Webpack + Babel Setup Tutorial instead. In that tutorial, you will set up a minimal React application with Webpack. Afterward, you should be able to transfer the source code from this React Redux tutorial to your minimal React with Webpack starter kit project. Then you have a React Redux Webpack example application up and running.
- React, Redux & TypeScript: In this tutorial, you will use JavaScript with a couple of features from future ECMAScript versions. You will not use TypeScript. However, you can head over to the official TypeScript website to learn more about it. Build a small project with it and then apply your learning in this React Redux tutorial by refactoring your project to TypeScript. Then you have a React Redux TypeScript example application up and running.
- React, Redux & React Router: In this tutorial, you will only implement a couple of components. Thus there is no client-side navigation from URL to URL involved. However, at some point you may want to add navigation to your project. Then you can head over to this React Firebase tutorial which teaches you React Router on the side. Even though the main focus lies in implementing authentication and authorization in React (with Redux) by using Firebase, you will learn about the navigation with React Router too. Afterward, you can come back to this React Redux tutorial and add React Router on top of it. Then you have a React Redux React Router example application up and running.
- React, Redux & Firebase: You will not use a database in this React Redux tutorial. When people ask me about persisting data in React (with Redux) applications, my initial recommendation for them is to checkout Firebase. Same as for the React Redux Router recommendation, head over to this React with Firebase (and Redux) tutorial. It will teach you how to setup Firebase in your React application, how to use it with basic React but also React and Redux, and how to implement a registration, login, and logout with React Redux and Firebase.
- React Redux & GraphQL: Adding GraphQL to your application, and thus a GraphQL client library (e.g. Apollo Client) to React, is another level of abstraction on top of it. If you want to learn more about GraphQL, head over to this React GraphQL tutorial. You will learn how to use GraphQL with HTTP and Apollo Client in a React application. Afterward, this quick tutorial series may be useful to learn about combining GraphQL and Redux in your React application.
As you have seen, there are many third-party solutions that you may want to use with React and Redux. My biggest advice on this: Do it step by step. With each of the referenced tutorials, you take another step. In the end, you should be able to combine any other solution, be it TypeScript or GraphQL, with React and Redux.
WHAT IS REDUX?
Redux is one of the libraries that helps you implement sophisticated state management in your application. It goes beyond the local state (e.g. React’s local state) of a component. It is one of the solutions you would take in a larger application in order to tame the state. A React application is a perfect fit for Redux, yet other libraries and frameworks highly adopted its concepts as well.
Why is Redux that popular in the JavaScript community? In order to answer that question, I have to go a bit into the past of JavaScript applications. In the beginning, there was one library to rule them all: jQuery. It was mainly used to manipulate the DOM, to amaze with animations and to implement reusable widgets. It was the number one library in JavaScript. There was no way around it. However, the usage of jQuery skyrocketed and applications grew in size. But not in size of HTML and CSS, it was rather the size of code in JavaScript. Eventually, the code in those applications became a mess, because there was no proper architecture around it. The infamous spaghetti code became a problem in JavaScript applications.
It was about time for new solutions to emerge which would go beyond jQuery. These libraries, most of them frameworks, would bring the tools for proper architectures in frontend applications. In addition, they would bring opinionated approaches to solve problems. These solutions enabled developers to implement single page applications (SPAs).
Single page applications became popular when the first generation of frameworks and libraries, among them Angular, Ember and Backbone, were released. Suddenly, developers had frameworks to build scaling frontend applications. However, as history repeats itself, with every new technology there will be new problems. In SPAs every solution had a different approach for state management. For instance, Angular 1 used the infamous two-way data binding. It embraced a bidirectional data flow. Only after applications grew in size, the problem of state management became widely known.
During that time React was released by Facebook. It was among the second generation of SPA solutions. Compared to the first generation, it was a library that only leveraged the view layer. It came with its own state management solution though: React’s local state management.
In React, the principle of the unidirectional data flow became popular. State management should be more predictable in order to reason about it. Yet, the local state management wasn’t sufficient anymore eventually. React applications scaled very well, but ran into the same problems of predictable and maintainable state management when building larger applications. Even though the problems weren’t as destructive as in bidirectional data flow applications (Angular 1), there was still a problem once the application got larger. That was the time when Facebook introduced the Flux architecture.
The Flux architecture is a pattern to deal with state management in scaling applications. The official website says that “[a] unidirectional data flow is central to the Flux pattern […]”. The data flows only in one direction. Apart from the unidirectional data flow, the Flux architecture came with four essential components: Action, Dispatcher, Store and View. The View is basically the component tree in a modern application. For instance, React is able to implement such a View. A user can interact with the View in order to trigger an Action eventually (e.g. a click on a button). An Action would encapsulate all the necessary information to update the state in the Store(s). The Dispatcher on the way delegates the Actions to the Store(s). Then, the new state would be propagated from the Store(s) to the View to update them. The last part closes the loop of the unidirectional data flow.
The data flow goes in one direction. A View can trigger an Action, that goes through the Dispatcher and Store, and would change the View eventually when the state in the Store changed. The unidirectional data flow is enclosed in this loop. Then again, a View can trigger another Action. Since Facebook introduced the Flux architecture, the View was associated with React and its components.
You can read more about the Flux architecture on the official website. There you will find a video about its introduction at a conference too. If you are interested about the origins of Redux, I highly recommend reading and watching the material. After all, Redux became the successor library of the Flux architecture. Even though there were several solutions that implemented (partly) the Flux architecture, Redux managed to surpass them. But why did it succeed?
Dan Abramov and Andrew Clark are the creators of Redux. It was introduced by Dan Abramov at React Europe in 2015. However, the talk by Dan doesn’t introduce Redux per se. Instead, the talk introduced a problem that Dan Abramov faced that led to implementing Redux. I don’t want to foreclose the content of the talk, that’s why I encourage you to watch the video yourself. If you are keen to learn Redux, I encourage you to dive into the problem that was solved by it.
Nevertheless, one year later, again at React Europe, Dan Abramov reflected on the journey of Redux and its success. He mentioned a few things that had made Redux successful in his opinion. First, Redux was developed to solve a problem. The problem was explained by Dan Abramov one year earlier when he introduced Redux. It was not just another library but a library that solved an actual problem. Time Traveling and Hot Reloading were the stress test for Redux. Second, the constraints of Redux were another key factor to its success. Redux managed to shield away the problem with a simple API and a thoughtful way to solve the problem of state management itself. You can watch this talk too. I highly recommend it. Either you watch it right now or after the next section of this tutorial that introduces you to the basics of Redux.
