Learn more about computerscience with this collection
Understanding machine learning models
Improving data analysis and decision-making
How Google uses logic in machine learning
Step 04: Implementing UI components.
As you can see now, increase() and decrease() methods are called directly within the UI component. However, output data is handle by a stream builder.
It is better to have an intermediate layer to implement custom handlers to handle errors.
In the app.js file, the BLoC is initialized using the CounterBloc class. Thus, the Counter component is used by passing the BLoC as a prop.
That’s it. Now you can treat your business logic as a separate entity outside your UI components and change it as you need.
13
21 reads
MORE IDEAS ON THIS
Step 03: Adding more beauty to the BLoC by an intermediate clas
In this step, I will create the StreamBuilder.js inside the utils directory to handle the counter request from the UI. Moreover, developers can handle errors and implement customer handlers within this.
In the AsyncSnapshot class, we can initialize a constructor, h...
13
12 reads
1. Flexibility to update application logic
When the business logic is standalone from UI components, the impact on the application will be minimum. You will be able to change the business logic any time you want without affecting the UI components.
13
75 reads
4. Scalability
Over time, application requirements may change, and business logic can keep growing. In such situations, developers can even create multiple BLoCs to maintain the clarity of the codebase.
Moreover, BLoC patterns are platform and environment independent so that developers can use th...
13
28 reads
3. Ease of testing
When writing test cases, developers can focus on the BLoC itself. So the code base is not going to be messed up.
13
40 reads
2. Reuse logic
Since the business logic is in one place, UI components can reuse logic without duplicating the code so that the simplicity of the app will increase.
13
42 reads
Business Logic Component
Initially, the Business Logic Component (BLoC) pattern was introduced by Google as a solution to handle states in Flutter applications. It allows you to reduce the workload on UI components by separating the business logic from them.
14
315 reads
Step 02: Implementation of the BLoC.
Now, let’s implement the BLoC class. The BLoC class will be responsible for implementing all subjects related to business logic. In this example, it is responsible for the counter logic.
So, I have created a file named CounterBloc.js inside the bloc directory and used a pipe to...
13
19 reads
Benefits of Using BLoC Pattern with React
The concept behind the BLoC pattern is straightforward. As you can see in the above figure, business logic will be separated from UI components. First, they will send events to the BLoC using an observer. And then, after processing the request, UI components will be notified by the BLoC using obs...
14
92 reads
CURATED FROM
CURATED BY
Read & Learn
20x Faster
without
deepstash
with
deepstash
with
deepstash
Access to 200,000+ ideas
—
Access to the mobile app
—
Unlimited idea saving & library
—
—
Unlimited history
—
—
Unlimited listening to ideas
—
—
Downloading & offline access
—
—
Personalized recommendations
—
—
Supercharge your mind with one idea per day
Enter your email and spend 1 minute every day to learn something new.
I agree to receive email updates