What I learned after my first date with Redux

Not so long ago, I decided to jump onto the React train after no one in my local vicinity wanted Angular as the primary tech stack of expertise. It sucks that a lot of employers are dismissing Angular for the new kid on the block.

But it is what it is and I decided to adapt and up skill based on market demands. Libraries and frameworks change all the time. Nothing is ever permanent in programming — except for programming paradigms, structures and ways of thinking — but that’s a completely different story.

This story about my first ever date with Redux and here are my thoughts on the experience.

Let’s start with React

A lot of people tell me that React is easy — and they’re not lying. React IS definitely easier to pick up than Angular 2, especially if you’re coming in without any experience. It sort of reminds me of the original days of Angular 1, when you could just plop the framework anywhere without having to do a massive and stand-alone set up as recommended in Angular 2+.

However, with anything that’s truly simple comes with space for creative coders to make complex.

React = interface

What people don’t tell you when you start off with React is that it’s simply an interface organizing library that makes coding easier. The main focus for React is connecting the relationship between what users see and how coders code in a manner that makes sense from coding productivity and logical workflow perspective.

React redraws boundaries between HTML, CSS, and JavaScript by turning it on its side and putting everything into one file. Where Angular looks at relationships based on file type, React looks at the relationship between HTML, CSS, and JavaScript as one cohesive unit and does a very good job in representing it in the form of a component.

It seems weird at first but the flipped separation of concerns works.

But when you’re trying to make an app, there’s more to it than just drawing things on the screen. React is good at that but nothing much else.

Everything is all the same, just different

Things get a little complicated once you start hitting areas where data, database connections, queries, and states are involved.

This is where Redux comes in.

While React is busy dealing with painting pictures for the user, Redux is busy keeping track of all the data that changes. In theory, Redux can be used on its own and with other libraries but because of React’s popularity and deficiencies in the state management area, React and Redux are often paired together.

Redux = React’s Missing State Containers

Looking at it from an Angular developer’s perspective, Redux is the equivalent to services and factories in an Angular app. While there may be a lot of complaints and derision towards the React and Redux pairings (mostly because they don’t just magically work together without some code to hook them up to each other), the idea of state containers is not new.

React’s tagline is ‘A JavaScript library for building user interfaces’ and not the solution to all your front end coding needs. Whereas Angular is a framework, making it more robust in the number of features and functionalities available, React is a much smaller library with a single purpose.

Redux bolsters up the missing parts of React in order to help the developer complete their application.

Perks & Quirks

With every framework and library, there is always some perks and quirks.

My first error encounter with Redux is through the middleware react-redux-firebase. It turns out that you get a massive big red error along the lines Warning: Failed context type: The context store is marked as required in FirestoreConnect(Dashboard), but its value is undefined

The error sent me on a witch hunt towards Firebase and Firestore only to discover that the problem is with react-redux binding connector. Turns out a lot of things aren’t compatible with react-redux v6 but everything will work just fine if you downgrade to version 5.

More connections, more chances for incompatibility

Incompatibility issues seem like something that will make a frequent appearance in the future — but that is with anything that isn’t natively built into a library or framework.

There is also a lot of connecting middleware involved to get things to work, which I find interesting and different from how things are done in Angular. With Angular, you just add the additional thing on and that’s it. With React, you need to glue things together with another third party to make it work.

The perk with React and Redux is that you can cherry-pick only what you need for your creation. Unlike Angular which gives you the entire kit set, React requires you to go out and hunt down the parts. For some, this can be annoying but the perk is that you get a much smaller build for the final product.

Final Words

So far, there are a lot fewer files overall for the app I’m making in comparison to its Angular counterpart. It didn’t take me long to pick up the library but I think that having a strong grounding in HTML, CSS, and JavaScript with previous knowledge and experiences on structures and architecture also contributed.

The current app I’m working on has the same features and functionality as all the previous apps I’ve made — CRUD, database queries, authentication and, protected routes. It should be interesting what the final product will look like from a structural point of view and user experience — especially after years of working with Angular.

Personally, I’m liking React and keeping an open mind towards the library and its associates. I can see why it’s all the rage and why everyone is so in love with it. While it’s not as complete as Angular, React’s mindset and values are different from the Google-backed framework. Its aim is not to revolutionize the way web apps are made but to change the way you think about the process of creating them.



About Author /

I code. I write. I hustle. Living the #devLife remotely. Subscribe to my newsletter to stay connected with my latest posts and dev thoughts. Want to collaborate? DM me on LinkedIn

Leave a Comment

Your email address will not be published.

Start typing and press Enter to search