Benefits of Using BLoC Pattern with React - Deepstash
Benefits of Using BLoC Pattern with React

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 observables.

STASHED IN:

10

STASHED IN:

0 Comments

MORE IDEAS FROM THE ARTICLE

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.

STASHED IN:

9

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 the same BLoC pattern in many projects.

STASHED IN:

10

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, handle our data (check availability, etc. ), and handle errors. But in this example, I have only returned the data for ease of demonstration.

The initial data is passed into AysncSnapshot class and stored in the snapshot state for each subscription. Then it will get rendered in the UI components.

STASHED IN:

10

When writing test cases, developers can focus on the BLoC itself. So the code base is not going to be messed up.

1

STASHED IN:

10

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.

STASHED IN:

10

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.

3

STASHED IN:

10

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 pass the counter to the UI components.

There is simple logic in this class. However, when an app grows in size, imagine the complexity if we do not separate the business logic.

STASHED IN:

10

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.

STASHED IN:

10

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEAS

Testing in React Native

As your codebase expands, small errors and edge cases you don’t expect can cascade into larger failures. Bugs lead to bad user experience and ultimately, business losses. One way to prevent fragile programming is to test your code before releasing it into the wild.

There is more value in testing than you might realize. One of the best ways to fix a bug in your code is to write a failing test that exposes it. Then when you fix the bug and re-run the test, if it passes it means the bug is fixed, never reintroduced into the code base.

4

STASHED IN:

7

STASHED IN:

0 Comments

Marcus Lemonis

“People, Process, Product”

1

STASHED IN:

25

They started with iOS and when Android release was ready, took them only 2 days to build.

However, they immediately stopped after identifying various issues such as poor performance of touch events and lack of 64-bit support .

Though they thought React Native was ideally for iOS.

2

STASHED IN:

5