Consuming api using different state management
In this example we have created different state management(Redux,Bloc,GetX) with consuming api & different state management have different approach for consuming api
Redux
Redux is an application architecture, made originally for JavaScript and now used in applications built with reactive frameworks (such as React Native or Flutter)
Redux is designed to prevent the bug by making State immutable and with the unidirectional data flow. The approach has proven to be a work wheel in a synchronous situation but may cause problems when you perform tasks asynchronously.
Redux is a state management architecture library that successfully distributes data across widgets in a repetitive manner. It manages the state of an application through a unidirectional flow of data. Let’s explore the diagram below:
In this example, data generated in the main widget is needed in sub-widget 8. Ordinarily, this data passes through sub-widget 2 to sub-widget 6 and then, finally, it reaches sub-widget 8. This is also the case for widgets that need data generated or saved in the state of any widget that’s higher up in the hierarchy.
With Redux, you can structure your application so that the state is extracted in a centrally-located store. The data in this centralized store can be accessed by any widget that requires the data, without needing to pass through a chain of other widgets in the tree.
Redux is designed elegantly so the user can easily interact with the App which has frequent state changes, here are the four components generally Redux contains.
Action: When an event is generated then it is represented as an action and is dispatched to the Reducer.
Reducer: When Reducer gets any update, it updates the store with a new state what it receives.
Store: When Store receives any update it notifies to the view.
View: It is recreated to show the changes which have been made.
Redux Middleware
When Application performs any operation like fetching any data from third-party API then middleware comes into action it manages data when it is dispatched from the action and before it reaches the reducer.
How do changes in state affect the UI?
Updates made to the state reflect on the UI — each time the state updates, it triggers the logic that rebuilds the UI within the StoreConnector widget, which rebuilds the widget tree with every change in the state.
Advantages of Using Redux
- Unidirectional data flow.
- Immutable State.
- Guarantees predictability in the synchronous situation.
- Redux stores can keep the previous 5 versions of the store, so if something gets wrong, debugging can be done with ease.
Disadvantages of Using Redux
- It may generate a lot of boilerplate code
- Doing things asynchronously can bring unexpected side effects
Bloc
The business logic component(BLoC) is a state management technique that helps developers extract data from a central place in the project. This is one of the most utilized Flutter state management techniques, as it is recommended by developers at Google.
For example, if widgets submit events, BLoC sits in the middle, managing the conversation while other widgets respond
Cubit and bloc
Cubit is a special kind of Stream component based on some functions called from the UI. Functions that rebuild the UI by emitting different states on a Stream
Bloc is more advanced as it emits a Stream of states and receives a Stream of events
Cubit is a subset of Bloc; so, it reduces complexity. Cubit eliminates the event classes. Cubit uses emit rather than yield to emit state. Since emit works synchronously, you can ensure that the state is updated in the next line
In short, Cubit’s advantage is simplicity, while Bloc provides better traceability and advanced ReactiveX operations.
GetX
GetX is a fast, stable, and light state management library in flutter. There are so many State Management libraries in flutter like MobX, BLoC, Redux, Provider, etc. GetX is also a powerful micro framework and using this, we can manage states, make routing, and can perform dependency injection
GetX Managements
- State Management: There are two types of state management:
- Simple State Manager: It uses GetBuilder.
- Reactive State Manager: It uses GetX and Obx.
- Route Management: If we want to make Widgets like Snackbar, Bottomsheets, dialogs, etc. Then we can use GetX for it because GetX can build these widgets without using context.
- Dependency Management: If we want to fetch data from other Class then with the help of GetX, we can do this in just a single line of code. Eg: Get.put()
Here is sample example of consuming api using provider,redux,bloc and getx. This is way to handle api in flutter with different statemanagement.
