Redux Observable to the rescue
Ever since Redux was released by Dan and Andrew (huge fan ^_^), it certainly changed the way I used to write code. It opened a whole new door to the way we write our code using pure functions, immutable patterns, time travelling (wicked!!) and so much more. I am assuming you have prior knowledge of redux.
I first used redux for building our internal CRM web application for my company. A CRM tool is no small application of course, as time passed by, I soon realised my code was not so pure as I thought it would be. Coming from a MVC background, I tried creating something very similar using Redux. My reducers were pure functions which accepted initial state and returned updated state, which acted like my data model(M). Actions and routes were like my controllers(C) and of course react components were my views(V).
But there was a serious flaw in this architecture. My actions were not clean anymore. All the complicated logic was built in my actions. Although it was easier to track changes through action types, but I was unable to prevent my actions from getting polluted. I was obsessed with keeping everything simple and clean.
Let us dive into the code to understand the problem I faced
Below is an example to demonstrate how complicated my action became
It pained me to write this code, my function was not so clean and pure anymore, but I hate giving up, I had to fix it and find a way to keep my action clean. So after some searching I realised that my action was handling side effects. I needed a way to watch over the side effects without affecting my actions directly. Finally I bumped into Observables, a perfect match for my problem, that would not only fix complicated api handling but also handle other side effects. Let us understand what exactly is observable.
It is a concept of Reactive programming. To answer what it is I will quote it directly from the author himself
Reactive programming is programming with asynchronous data streams.
Reactive programming is beyond the scope of this article, so I will explain it in very simple terms.
The below image from the official doc explains what Observables are
I personally like visual representation, makes it much easier to understand.
Now combine Observables with Redux, we have a new Super saiyan 3 Redux Observable :)
It opened the door to a new style of programming called the reactive way! It is the sexiest thing I have come across. I won’t get into the details of it for now(may be in a different tutorial), I just wanted to discuss architecture. So let us dive into code and look at how beautiful a code can be through this.
The reducer stays as it is earlier. This helps me in keeping actions and reducers clean.
As reactive programming famously quotes,
Everything is a stream!
Imagine all the actions happening through the course of application is a stream, as soon as a event is detected in the stream, observables masqueraded as epics in our framework watch over those actions and emit events. For us the event that has happened is of action type FETCH_DELIVERY_ADDRESS_LIST_SUCCESS.
Our getDeliveryAddressEpic with help of Observable looks for the action in the event stream of type(ofType a operator in redux-observable) FETCH_DELIVERY_ADDRESS_LIST_SUCCESS. Argument action$ is acting as values provided to the epic from action getDeliveryAddress for handling side effects and returning updated value accordingly.
This might seem overwhelming, but if you have to observe the code from a top level view, look at the simplicity of the operation being handled.
Actions and reducers are clean, side effects and the dirty work is handled by our epics, which even makes the dirty work really clean! That is beauty of rxjs. Rxjs is different topic all together. My intention is to discuss the approach we can take to write cleaner and manageable code.
Of course this article might seem opinionated, I am sure there are other ways to handle side effects like redux saga. I hope this article gave you insight on how we can combine the concept of Observable into Redux and make your framework go super saiyan 3 :D
Please clap to encourage this article and show some ❤!
Follow me on twitter to get more updates regarding new articles and to stay updated in latest frontend developments.
Some helpful links to get started
See you again soon and happy coding!! ❤