Bloc VS Redux, who is the winner?
--
Deciding what state management works for your case is fundamental, so hopefully, this article might help :)
In this article, I will not discuss what is exactly state management, but instead, I will discuss and compare two state management that personally I have been used since my second semester of my colleague till now(still in my third year of a colleague) which is Redux and Bloc.
for the note, i have been using Redux since second semester of colleague but Bloc is much more new for me, because i’m using Bloc just since this pandemic start (middle 2020).
Most of us know that Bloc and Redux is the name of popular state management that most people use, especially if you are React developer, then I pretty sure most of you familiar with redux, and if you’re Flutter developer, I’m also pretty sure you’re familiar with Bloc. but the reality is, Bloc and Redux is a concept/abstraction/pattern that we can use to manage our state, so it’s not just a tool that dependent on the language or tech that we use. we can use Redux in Flutter(or other than React) and also we can use Bloc when we are using React(or other than Flutter).
Reactive Programming and Functional Programming
The first difference I can tell about Redux and Bloc is what paradigm inspired these concepts. if you are using Redux, the first thing you will find is Redux will help us create state management that always can predict their behavior because Redux is immutable and pure function. immutable and pure function are a concept that we can found in functional programming. If you are using Bloc, that the first thing you will find is you have to create a stream function that will be observed, so when the stream gave new data, the observer will know. this observer pattern that using publish and subscribe are a concept that we can found in Reactive Programming.
In my opinion, Reactive Programming is a new world for me and I still learning about it, it’s very complex but also very interesting too, and I think it’s a very important paradigm that will be used in the future
One Store vs Many Blocs
when we are using Redux, because the goal of this concept is to create a global store that can be accessed everywhere, it makes sense that we only need to create one global store and not more than one global store. why we only need one global store? if we are using more than one global store then we will lose the consistency of the data we have. But if we are using Bloc, we will create many Blocs (if we need it) and we will distribute our data through all of our blocs.
Amount of Code you have to write
If you are a lazy developer that doesn’t want to write too many codes just for state management, I guess this section will be important for you. As I already said, when we use Redux, we have to build our store first, then embed it into the root component of your projects, after that, you have to create your reducers, events, and actions (optionally thunk). for every reducer, you have to build actions and events for the reducers. if you are starting from scratch, using Redux will be very overwhelming especially if you’re not familiar with it. but if you are using Bloc, we will create less code for our bloc to be used. Of course, even the code needed to write bloc is less than Redux, Bloc is much more complex for me because we need to understand the concept of the stream and observe concept, which very hard for me to understand, opposite with Redux that for me pretty straight forward and elegant.
Comparing Login Feature using Redux vs Bloc
for example of login feature, I will show how the login feature implemented on my PPL project using Flutter, Bloc, and Firebase. and for Redux, I will show you examples using React and Redux. For these two examples, I will just show you the Bloc/Redux section and not the whole Login feature.
React with Redux
as already mentioned, for using Redux, we need to create store, reducers, and actions, so this is the code
as you can see, the implementation of redux is pretty straight forward but many components that need to written, and for some people who new with redux, it can be very overwhelming.
Flutter + Bloc
when i and my team build our Bloc, we are creating three file which is the Bloc, event and state.
event used to trigger what task bloc need to do, and state, just like the name, to mapping the new state come from the bloc. as you can see, using bloc is less code than using redux, but if you’re unfamiliar with stream or receive programming, probably you will not comfortable when read this piece of code.
if you realize, the implementation of using Redux or Bloc is pretty similar in a weird way, at least in my own opinion. but for me, Bloc is much complex even more less code needed, maybe because i’am not familiar with reactive programming.
Conclusion
in my own opinion i’am still a big fan of redux and not planning to stop using for another concepts. but we need to use right tool for right cases, so i think if you’re planning to making mobile apps with Flutter, maybe using Bloc is wise decision, because when you’re using Flutter, mostly people already using Bloc and the documentation of Bloc is already well documented, so you can make sure if you found obstacle, google and stackoverflow could help you. if you’re using redux in Flutter, there is nothing with it, but i already try using redux in Flutter but redux with Flutter is not to popular and i can’t make sure google and stackoverflow could always help you if you find obstacle.
well, that’s all for this article, hope you find this article helpful, thanks :D
