Perform Effortless CRUD Actions in Blazor DataGrid with Fluxor

Jollen Moyani - Feb 23 - - Dev Community

Fluxor is a useful tool for managing application states in a centralized manner, allowing for easier traceability of changes. It is a zero-boilerplate state management library for .NET that operates on the Flux and Redux principles. The goal of Fluxor is to simplify front-end development by providing a single-state store approach for multiple UIs, without the hassle of excessive boilerplate code. The Fluxor concepts are well-explained by Peter Morris and the Fluxor team in the following links:

In this blog, we’ll see how to integrate Fluxor with the Syncfusion Blazor DataGrid and perform CRUD actions using state management principles.

Note: Before proceeding, refer to the Blazor DataGrid documentation for getting started with the control.

Adding Fluxor and initiating it in the project

Follow these steps to add Fluxor to your Blazor project:

1.First, install the Fluxor.Blazor.Web NuGet package in the .Client project in your solution.

Install-Package Fluxor.Blazor.Web
Enter fullscreen mode Exit fullscreen mode

2.Then, register Fluxor by adding the following code in the Program.cs file, just before the line that starts with “await builder.Build()”:.

builder.Services.AddFluxor(options => options.ScanAssemblies(typeof(Program).Assembly));
Enter fullscreen mode Exit fullscreen mode

3.Define Fluxor using the following statement at the top of the Program.cs file.

using Fluxor;
Enter fullscreen mode Exit fullscreen mode

4.To initialize Fluxor with the store when the app starts, add the following line to the top of the App.razor file.

<Fluxor.Blazor.Web.StoreInitializer />
Enter fullscreen mode Exit fullscreen mode

5.Update the wwwroot/index.html file by adding the following code just above the </body> tag.

<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
Enter fullscreen mode Exit fullscreen mode

6.To enable the browser extension, install the Fluxor.Blazor.Web.ReduxDevTools NuGet package.

Install-Package Fluxor.Blazor.Web.ReduxDevTools
Enter fullscreen mode Exit fullscreen mode

7.Finally, in the Program.cs file, add the following line.

builder.Services.AddFluxor(options => { options.ScanAssemblies(typeof(Program).Assembly); options.UseReduxDevTools(); });
Enter fullscreen mode Exit fullscreen mode

Creating the store

Before integrating Fluxor with the Syncfusion Blazor DataGrid component, it’s necessary to create a Fluxor store. This is because CRUD operations are performed on state data, which is managed in a centralized manner. The store holds the entire app’s state, and all updates are performed through actions and reducers. The Fluxor store consists of the following folders:

  • Actions
  • Reducers
  • States and Features
  • Effects

Creating the state

We next need to create a state. The state defines the data structure and serves as the centralized store for the entire app. In this case, we have created the OrderState.

Refer to the following code example.

public record OrdersState: OrderLoadableState
{
   public List<Order> Orders { get; init; }
}
public class OrdersFeatureState : Feature<OrdersState>
{
   public override string GetName()
   {
        return nameof(OrdersState);
   }
   protected override OrdersState GetInitialState()
   {
       return new OrdersState
       {
           ...
       };
   }
}
Enter fullscreen mode Exit fullscreen mode

The previous code example shows the addition of a Feature class that exposes the OrderState to Fluxor. This allows all updates to the state to be performed through actions and reducers. These updates are crucial in maintaining the integrity of the centralized state and ensuring that it accurately reflects the entire app’s state.

The Fluxor Feature<T> class requires the implementation of two abstract methods:

  • The first method returns the name that Fluxor will use for the feature.
  • The second method sets up the initial state of the OrderState.

Next, we need an action to dispatch while performing CRUD actions in the Blazor DataGrid.

Creating the action

Actions play an important role in Fluxor architecture. They are objects that describe changes to the state and are dispatched from components to be processed by reducers.

To perform CRUD operations with Fluxor, specific actions must be created for each operation. For instance, if you want to implement CRUD state management for a list of items, you should create actions for adding, updating, deleting, and retrieving the list of items.

Refer to the following code example to implement these actions.

namespace FluxorSyncfusionGrid.Client.OrderStore.Actions
{
    public record SetOrderAction
    {
        public Order Order { get; set; }
    }
    public record UpdateOrderAction
    {
        public Order Order { get; set; }
    }
    public record ResetOrderAction
    { }
    public record AsyncLoadOrderAction 
    { 
        public int Id { get; set; }
    }
    public record AsyncUpdateOrderAction
    {
        public Order Order { get; set; }
    }
    public record AsyncAddOrderAction
    {
        public Order Order { get; set; }
    }
    public record AsyncDeleteOrderAction
    {
        public Order Order { get; set; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Creating the reducers

As discussed in the Action section, we require a reducer method to handle the actions. Reducers play a crucial role in the Fluxor architecture by updating the state in response to dispatched actions. They are defined as functions that receive the current state and an action and then return a new state that reflects the changes described by the action.

For example, in the case of a CRUD state management for a list of items, the reducer would handle actions such as adding, updating, deleting, and retrieving the list of items, updating the state accordingly.

Refer to the following code example.

public static class OrderReducer
{
     [ReducerMethod]
     public static OrderState OnSetOrder(OrderState state, SetOrderAction action)
     {
            return state with 
            {
               . . .
            };
     }
     [ReducerMethod]
     public static OrderState OnUpdateOrder(OrderState state, UpdateOrderAction action)
     {
         return state with 
         {
             . . .
         };
     }        
     . . .
}
Enter fullscreen mode Exit fullscreen mode

We can see that the UpdateOrder reducer method receives a currentState as a parameter and returns a new state with the updated values.

We now have to create the OrderService to fetch the data from the API and corresponding CRUD action methods. Refer to the following code example.

public class OrderService
{
    public async Task<List<Order>> GetOrders(int limit = 10)
    {
         List<Order> items;            
         items = await this.http.GetFromJsonAsync<List<Order>>($"{this.Url}posts?_limit={limit}");            
         return items;
    }
    public async Task<Order> AddOrder(Order Order)
    {
         HttpResponseMessage response = await this.http.PostAsJsonAsync($"{this.Url}posts", Order);
         Order savedOrder = await response.Content.ReadFromJsonAsync<Order>();
         return savedOrder;
    }
    public async Task<Order> UpdateOrder(Order Order)
    {
         HttpResponseMessage response = await this.http.PutAsJsonAsync($"{this.Url}posts/{Order.Id}", Order);
         Order savedOrder = await response.Content.ReadFromJsonAsync<Order>();
         return savedOrder;
    }
    public async Task<bool> DeleteOrder(Order Order)
    {
         await this.http.DeleteAsync($"{this.Url}posts/{Order.Id}");
         return true;
    }
}
Enter fullscreen mode Exit fullscreen mode

What are effects, and why are they needed?

Effects in Fluxor are utilized to separate the state update logic from the side effect logic. This separation makes the code easier to understand and maintain, as it clearly defines which portions of the code are responsible for updating the state and which are responsible for the side effects.

Effects are employed in Fluxor when a dispatched action requires access to resources outside the store. For instance, you could use an effect to retrieve data from a remote API in response to an action request. The effect would make the API call, and when the data is returned, it will dispatch another action to update the state with the obtained data. This separation of the logic of fetching data and updating the state enhances the code’s readability and maintainability.

In this example, we use the Effects method to fetch data from a remote service.

public class OrdersEffects
{
    private readonly IState<OrdersState> State;
    private readonly OrderService OrderService;
    public OrdersEffects(IState<OrdersState> state, OrderService OrderService)
    {
        State = state;
        OrderService = OrderService;
    }
    [EffectMethod]
    public async Task AsyncLoadOrdersEffect(AsyncLoadOrdersAction action, IDispatcher dispatcher) 
    {

        List<Order> Orders = await this.OrderService.GetOrders(); //fetch the data from remote API 
        dispatcher.Dispatch(new SetOrdersAction { Orders = Orders }); //dispatch the action to set the Order data for maintaining the state
    }
}
Enter fullscreen mode Exit fullscreen mode

Integrating the Syncfusion Blazor DataGrid with Fluxor

Let’s integrate Fluxor with Syncfusion Blazor DataGrid to perform CRUD operations in it.

1.To access Fluxor resources, simply add the following code in the Index.razor file.

@inherits FluxorComponent
Enter fullscreen mode Exit fullscreen mode

2.Add the OrderState and Fluxor Dispatcher, since we have to access and dispatch the actions.

@inject IDispatcher Dispatcher
@inject Istate<OrdersState> OrdersState
Enter fullscreen mode Exit fullscreen mode

3.Next, we inject the IActionSubscriber. This will allow the Order class to subscribe to the action and be notified of changes in the state.

@inject IActionSubscriber ActionSubscriber
Enter fullscreen mode Exit fullscreen mode

4.Define the Syncfusion Blazor DataGrid in the same Index.razor file and directly bind the Orders collection from OrdersState to the grid using the DataSource property.

<SfGrid TValue="Order" ID="Grid" DataSource="@OrdersState.Value.Orders" Toolbar="Toolbaritems" AllowSorting="true" AllowFiltering="true" AllowPaging="true">
    . . .
    . . .
</SfGrid>
Enter fullscreen mode Exit fullscreen mode

5.In the following code example, in the OnInitialized and OnInitializedAsync lifecycle functions, we subscribe the actions Load , Update , Delete , and Add.

protected override void OnInitialized()
{
    base.OnInitialized();
    ActionSubscriber.SubscribeToAction<AsyncUpdateOrderAction>(this, (Action) =>
    {
         ChangeIdToChange();
    });
    ActionSubscriber.SubscribeToAction<AsyncLoadOrderAction>(this, (Action) =>
    {
         ChangeIdToChange(0);
    });
    ActionSubscriber.SubscribeToAction<ResetOrderAction>(this, (Action) =>
    {
         ChangeIdToChange(0);
    });
}


protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    if (!OrdersState.Value.Orders.Any())
    {
        await InvokeAsync(() => { Dispatcher.Dispatch(new AsyncLoadOrdersAction()); });
    }
}
Enter fullscreen mode Exit fullscreen mode

So initially, the data will be fetched from the Effects method and then stored in the State since the AsyncLoadOrderAction was subscribed. Refer to the following code example.

[EffectMethod]
public async Task AsyncLoadOrdersEffect(AsyncLoadOrdersAction action, IDispatcher dispatcher) 
{               
    List<Order> orders = await this.OrderService.GetOrders(); // Fetch the data
    dispatcher.Dispatch(new SetOrdersAction { Orders = orders }); // Dispatch the next action
}
Enter fullscreen mode Exit fullscreen mode

6.Define the command column in DataGrid to perform the edit and delete operations using the Syncfusion Blazor Dialog component.

<SfDialog @ref="Dialog" Height="400px" Width="600px" @bind-Visible="@IsVisible" ShowCloseIcon="true" IsModal="true" >
    <DialogTemplates>
        <Header>Order Information</Header>
        <Content>
            <RenderOrderEditForm IsAdd="@IsAdd" EditFormButtonPressed="HandleFormButtonClick" Data="@RowData"/>           
        </Content>
    </DialogTemplates>
    <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
</SfDialog>
Enter fullscreen mode Exit fullscreen mode

7.If we choose the Save button in the dialog component, then we have to dispatch the following action in it.

if (Order.Id != 0)
{
    Dispatcher.Dispatch(new AsyncUpdateOrderAction { Order = Order });
}
Enter fullscreen mode Exit fullscreen mode

The dispatch action will trigger the corresponding AsyncUpdateOrderEffect , where an API call is made to add the data to the state. Refer to the following code example for reference.

[EffectMethod]
public async Task AsyncUpdateOrderEffect(AsyncUpdateOrderAction action, IDispatcher dispatcher) 
{             
    Order order = await this.OrderService.UpdateOrder(action.Order); // Call the OrderService method to update the data in the remote API            
    dispatcher.Dispatch(new UpdateOrderAction { Order = order });
    await Task.Delay(1);
    dispatcher.Dispatch(new UpdateSingleOrderOrdersAction { Order = order }); // Update internally by calling the corresponding action state
}
Enter fullscreen mode Exit fullscreen mode

Performing CRUD operations

Let’s perform CRUD operations in the Blazor DataGrid using Fluxor!

Delete

If we delete an Order using the CommandColumn button, it will call the OnDelete method. In this method, we will dispatch the AsyncDeleteOrderAction.

if (args.CommandColumn.Title.Equals("Delete"))
{
    OnDelete(Order);
}

public void OnDelete(Order item)
{
    Dispatcher.Dispatch(new AsyncDeleteOrderAction { Order = item });
}
Enter fullscreen mode Exit fullscreen mode

The dispatch action will trigger the corresponding AsyncDeleteOrderEffect , where an API call is made to delete the data in the state.

[EffectMethod]
public async Task AsyncDeleteOrderEffect(AsyncDeleteOrderAction action, IDispatcher dispatcher) 
{
    bool isDeleted = await this.OrderService.DeleteOrder(action.Order); // Call the API method to delete the Order item
    if (isDeleted)
    {
        dispatcher.Dispatch(new ResetOrderAction());
        await Task.Delay(1);
        dispatcher.Dispatch(new DeleteSingleOrderOrdersAction { Order = action.Order }); // Update internally by calling the corresponding action state
    }
}
Enter fullscreen mode Exit fullscreen mode

Add

Let’s add a new record to the DataGrid using the custom toolbar item. Refer to the following code example.

<SfGrid TValue="Order" ID="Grid" DataSource="@OrdersState.Value.Orders" Toolbar="Toolbaritems" AllowSorting="true" AllowFiltering="true" AllowPaging="true">
    . . .
    . . .
</SfGrid>
@code{
    protected override void OnInitialized()
    {
        . . .
        . . .
        Toolbaritems.Add(new ItemModel() { Text = "New Order", TooltipText = "Add new"});
    }
}
Enter fullscreen mode Exit fullscreen mode

The Dialog component will be displayed when we press the New Order button in the DataGrid toolbar. After entering the inputs, click Save.

Dispatcher.Dispatch(new AsyncAddOrderAction { Order = Order });
Enter fullscreen mode Exit fullscreen mode

The dispatch action will trigger the corresponding AsyncAddOrderEffect , where an API call is made to add the data to the state.

[EffectMethod]
public async Task AsyncAddOrderEffect(AsyncAddOrderAction action, IDispatcher dispatcher) 
{ 
    Order order = await this.OrderService.AddOrder(action.Order);         
    order.Id = OrdersState.Value.Orders.Max(p => p.Id) + 1;          
    dispatcher.Dispatch(new UpdateOrderAction { Order = order });           
    await Task.Delay(1);
    dispatcher.Dispatch(new UpdateSingleOrderOrdersAction { Order = order });
}
Enter fullscreen mode Exit fullscreen mode

Update

The DataGrid UI will be automatically updated when CRUD actions are completed and stored in the state without requiring manual refresh or any other actions to reflect the changes in the grid.

After executing the previous code examples, the output will look like the following image.

Performing CRUD Actions in Blazor DataGrid with Fluxor

Performing CRUD Actions in Blazor DataGrid with Fluxor

GitHub reference

Check out the complete example for this on GitHub demos.

Conclusion

Thanks for reading! In this blog, we’ve learned how to integrate the Syncfusion Blazor DataGrid with Fluxor and perform CRUD operations in it. Feel free to try out these steps and share your feedback in the comments section. For more details, refer to the online demos.

Syncfusion DataGrid is also available in the ASP.NET (Core, MVC), Blazor, Angular, JavaScript, React, Vue, Xamarin, Flutter, WinForms, WPF, .NET MAUI and WinUI platforms. Use this component wherever you need to build world-class apps!

The latest version of Essential Studio is available for existing customers from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out all the available features.

For questions, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
What's The Job Market For Specializes In Asbestos Litigation Professionals Like?
Image
Why We Love Accident Lawyer Dallas (And You Should, Too!)
Image
7 Things You've Never Known About Asbestos Poisoning Compensation
Image
penyiapan penting saat sebelum taruhan judi games slots online
Image
What is Identity Verification in Blockchain ? Types, Benefits & Challenges
Image
Trap Laten Schilderen Tot 4 Gratis offertes aanvragen
Image
Full-Stack Development

webdev, beginners, fullstack, development
Image
Folding Mobility Scooters For Sale Near Me Tools To Make Your Day-To-Day Life
Image
A Personal Unsecured Loan Is Available Even If You Have Had Bad Credit
Image
What's The Reason? Adult L Shaped Bunk Beds Is Everywhere This Year
Image
Stylowe Mieszkanie: Jak Stworzyć Przestrzeń, Która Inspiruje
Image
Teknik Menunjuk Situs Judi Online Terhebat Amat Cocok
Image
5 Laws That Anyone Working In L-Shaped Beds For Small Rooms Should Be Aware Of
Image
The Next Big New Traffic Accident Lawyer Near Me Industry
Image
Welke buis voor vloerverwarming? Keuzehulp
Image
How to manage multiple environments with dotenv and Databases config in NestJS

typeorm, nestjs, postgressql, backend
Image
Keuntungan Masuk Dengan Agen Judi Online Bisa dipercaya
Image
10 Top Mobile Apps For Repair Bifold Door Top Roller
Image
5 Laws That Anyone Working In Qualified Gas Engineer Should Know
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .