Common JavaScript tasks without Redux

Have you noticed this trend that many JavaScript developers don’t know how to solve pretty basic tasks in their web apps without using Redux?

It starts like this — a developer has two or more components in different parts of the UI and struggling to organize a communication channel between them. That’s the exact problem that Redux is great at solving, right? Well, it depends…

What if you’re app is using a Firebase or GraphQL client (Relay Modern), that already handling data management for you? All you have to do in this case is just to fetch new data from the server and render it. In respond to user actions, you just send user input back to the Firebase or GraphQL backend triggering the next application data flow cycle — life is nice and easy!

Still, there will be a few cases when you need to manage state only on the client. But before plugging in some existing 3rd party library, it may help to think about how would you solve this problem using vanilla JavaScript. It’s better to demonstrate that by an example.

There are a few places in the app, where you need to initiate an action that displays Login Dialog to the user. For example, [Sign In] button in the toolbar being one of those, [Continue] button in the comment box is another, an Ajax response containing 401/403 error codes etc.

Login Dialog (modal)

For that, we can create a custom class (src/auth.js) with a simple API:

The implementation is pretty simple as well, but before digging into that, let’s see how to use that API.

In the toolbar component you have [Sign In] button that needs to open a login dialog when clicked. You just add onClick event handler that will call auth.showSignInDialog(). In case with React.js, it would look something like this:

Next. You can place the login dialog itself into the he top-level component:

Inside the sign in dialog you would call auth.signIn() and either display an error message or close the dialog based on the response:

And finally, you can subscribe to any changes in the authentication state and pass user object to your app by using passing a callback to auth.onAuthStateChange(user => ... ).

Now, let’s see how the src/auth.js file looks like. If you’re using Firebase, it would look as simple as:

After having a minimal vanilla JavaScript solution (MVJS), you can make an informed decision whether it is good idea to use it as it is, or a more sophisticated solution is needed.

If your app is small enough, most likely a few lines of custom JavaScript code can solve most of the problems like the one from the example above. In a more complex apps, you could benefit from using Facebook’s Flux library — it’s supper simple and easy to work with. If you would try to explain how Flux works to a new intern in your company, he would instantly understand it and will start shipping :) With Redux, it may not be that easy — take a look at the forums and discussion boards with all these question about Redux.

If you’re using Relay (like me), there is no much benefits in integrating Redux as you can use Relay Modern for managing local state as well. It’s a bit more complex than Redux, but on the other hand, there is no much places where you actually need to manage client state by hand.

Always start by thinking how a vanilla JS solution looks like before integrating a 3rd party library. The more libraries you have, the harder it may become to maintain and develop your app, especially when you onboard new members to your dev team. In case with client-stage management, a few lines of custom JS may solve the trick. If not, my next option would be Flux. If you need to manage most of the client state manually then I would consider using Redux. If you’re using Relay Modern, you can manage client state by using existing API provided by Relay.

Want to ship web apps faster? Check out the following boilerplate projects:

I just created a Telegram chat room where you can ask questions and get support — @ReactStarter. We’ll be glad to meet your there! Cheers.

Bringing the technical edge to early-stage companies with advice on software architecture, best practices, database design, web infrastructure, and DevOps.