Or packages you should know to create a Redux production application

Warning: This article is about front-end applications and nothing about server rendering.

What’s going on?

Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems really clear that the future web applications are all about this sweet couple.

Yes, you have!

The truth is that interface building and data handling are not enough to create a real production application. To create a small example like a TODO-list or something — yes. Not for something bigger.

Reusable components

First of all, when you develop a big application with React, you need to reuse your components. There’s no way just to pass the Redux Dispatcher through the hierarchy of components to give access all of them to throw actions. You need just a small set of components that know what your application does in particular, i.e. what actions it has to change the State and what the State represents exactly. Rid most of them of that and let them do just a dumb work — display the data and handle parents’ callbacks. That’s how you’ll make them reusable.

Routing

If you have more than one page in your application, you need to define what components correspond to URL paths and what URL paths are available. That’s what we call routing. Every front-end framework has the router, — the special part which is responsible for routing.

Routing data in the State

Cool, now you have the routing in your application. Yet if you know one of the best advantages of Redux architecture, you can ask why can’t you do the time travelling with pages switching like you do with everything else? Why doesn’t React Router navigate between pages when you replay actions?

Authentication

There’s no real application without authentication. And when you already have routing in yours, authentication represents the rule about how to check if a user is authenticated and what pages he can see depending on it.

Async Flow

A real application works with data through asynchronous requests to API; this means you need to know how to make Redux support async actions. And that’s pretty simple if you already know about Redux middleware.

Conclusion

This was my attempt to introduce you several of the most important packages that extend the React & Redux functionality to make it possible to create a real application ready for production. If you’re a newbie in React & Redux architecture, but you already understand the main principles of those frameworks, this article should introduce you the best practices and patterns, that usually used in with this couple.

  • Organize the routing;
  • Play with the routing data in Redux DevTools;
  • Organize authentication;
  • Organize the async flow to work with remote API.

A frontend engineer with a passion to create things that make people’s lives better. Planet Earth 🌎

A frontend engineer with a passion to create things that make people’s lives better. Planet Earth 🌎