Using Fluxor in Blazorise for state management

[GevorDanielyan]

Hello everyone.

I have Blazorise Data Grid component, which have parameter for editing. In one page this grid needs to be non editable, and second page where I use that component, needs to be editable. Also I need to manage state, for example when I change some row in that grid(where my data grid component parameter set as editable), it is necessary for it to appear in the other grid at the same time as well.

I explored a Fluxor a little bit, but whole examples point to default Counter page's increment method.

Is there any samples related data grid state management?

My component is

@using Grpc.Core
@using DdeRPCService
@using Blazorise.DataGrid
@using DdeOfflineRPCService
@using GrpcService.BlazorApp.Models
@using Google.Protobuf.WellKnownTypes
@inject DdeRPCService.DdeService.DdeServiceClient ddeClient
@inject CashgRPCService.CashService.CashServiceClient cashServiceClient
@inject GoldgRPCService.GoldService.GoldServiceClient goldServiceClient
@inject NonCashgRPCService.NonCashService.NonCashServiceClient nonCashServiceClient
@inject DdeOfflineRPCService.DdeOfflineService.DdeOfflineServiceClient ddeOfflineClient
@inject ILogger<Dde> _logger

<h3>Dde</h3>

<DataGrid TItem="DdeModel"
          Data="_dde"
          Virtualize
          Editable="@Editable"
          RowUpdated="@OnRowUpdated"
          Hoverable="true"
          Bordered="true"
          HeaderThemeContrast="ThemeContrast.Light"
          Style="color: #fff; font-size: .80em;"
          Responsive>
    <DataGridColumns>
        <DataGridCommandColumn Context="dataGridContext"
                               NewCommandAllowed="false"
                               EditCommandAllowed="true"
                               DeleteCommandAllowed="false"
                               TItem="DdeModel">
            <EditCommandTemplate>
                <Button Color="Color.Primary" Clicked="dataGridContext.Clicked">Edit</Button>
            </EditCommandTemplate>
        </DataGridCommandColumn>

        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Pair)" Caption="Forex" Sortable="false">
            <DisplayTemplate>
                <Image Source="@context.Ico" Style="width:20px; height:15px;" />
                @context.Pair
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Bid)" Caption="BID" Editable="false" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Ask)" Caption="ASK" Editable="false" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.OBid)" Caption="BID(Off)" Editable="true" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Oask)" Caption="ASK(Off)" Editable="true" Sortable="false" />
    </DataGridColumns>

</DataGrid>

<style>
    .table-bordered > :not(caption) > * > * {
        border-width: 1px;
    }
</style>

@code {

    [Parameter]
    public bool Editable { get; set; }

    [Inject] 
    IMessageService? MessageService { get; set; }

    Empty emptyRequest = new Empty();

    private List<DdeModel> _dde = new List<DdeModel>();

    protected override async Task OnInitializedAsync()
    {
        StateHasChanged();
        await GetDdeAsync();
        await base.OnInitializedAsync();
    }

    private async Task GetDdeAsync()
    {
        try
        {
            using (var call = ddeClient.GetDde(emptyRequest, deadline: DateTime.UtcNow.AddSeconds(5)))
            {
                await foreach (var response in call.ResponseStream.ReadAllAsync())
                {
                    var ddeResponse = new DdeModel
                        {
                            Pair = response.PAIR,
                            Ico = response.ICO.TrimStart('~'),
                            Bid = response.BID,
                            Ask = response.ASK,
                            OBid = response.OBID,
                            Oask = response.OASK

                        };
                    _dde.Add(ddeResponse);
                }
            }
        }
        catch (RpcException ex) when (ex.StatusCode == StatusCode.DeadlineExceeded)
        {
            _logger.LogError(ex.Message);
            throw;
        }
    }

    private async Task OnRowUpdated(SavedRowItem<DdeModel, Dictionary<string, object>> e)
    {
        var dde = e.Item;
        UpdateDdeOfflineRequest request = new UpdateDdeOfflineRequest
            {
                PAIR = dde.Pair,
                ASK = dde.Oask,
                BID = dde.OBid
            };

        var response = await ddeOfflineClient.UpdateDdeOfflineAsync(request);

        if (response.Message is null)
        {
            await MessageService!.Error("Cannot update Dde offline");
        }

        await goldServiceClient.UpdateGoldAsync(emptyRequest);
        await cashServiceClient.UpdateCashAsync(emptyRequest);
        await nonCashServiceClient.UpdateNonCashAsync(emptyRequest);

        await MessageService!.Info("Updated successfully");
    }
}

And pages where I call this component

First is non editable in home page
<Dde Editable=false></Dde>

And second editable grid
<Dde Editable=true></Dde>

Thanks in advance

[stsrki]

I'm not familiar with Fluxor because I have never worked with it. @mrpmorris, any chance you can help here?

[GevorDanielyan]

If there is other solution, for example with component lifecycle methods, for solving this issue, please tell.

[mrpmorris]

1. Receive the data from the server
2. Dispatch an action with that data in it
3. A reducer reduces that data into state
4. Your grid binds to the data in the state

When you edit something in another form

1. Send it to the server
2. Dispatch an action DdeUpdatedAction(theUpdatedObject)
3. A reducer reduces that action into the state used by the grid

[GevorDanielyan]

Thank you for your answer dear @mrpmorris , let's clarify a few more questions regarding the steps you wrote.

1. Receive the data from the server.
   I have one component(above), where I receive the data from my gRPC server, and I'm using this component on two different pages. You mean that I need to receive data from server somewhere else(in state class for example) or in the component where it was originally done?

Since I'm new in this topic, please, could you write some code to show how to do this steps?
Thanks in advance.

[mrpmorris]

You can receive the data how you do now, just let the state know it has arrived by dispatching an action with the data in it.