State Management In Blazor

OnStateChange is an event. This event will be raised when the state is changed.

NotifyStateChanged() is the method that will be used to raise the OnStateChange event when the state is changed.

SetValue() method will be invoked by the sender component to modify the old state to the new state. Once the state is changed then the ‘NotifyStateChanged()’ method will be called to raise the state-changed event.

Modify the Program.cs file and register StateContainerService into the dependency container as a singleton object as shown below.

builder.Services.AddSingleton<StateContainerService>();

Step - 4 Create a new component

@page "/studentdetails"
@using Blazor_StateManagement.Models;
@inject StateService.StateContainerService stateService;
@implements IDisposable
@inject NavigationManager navigationManager;
<h3>Student Details</h3>
 
<div class="container">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Student Id</th>
                <th>Student Name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in student)
            {
                <tr>
                    <td>@item.StudentID</td>
                    <td>@item.StudentName</td>
                    <td>
                        <input type="button" @onclick="@(()=>SelectedStudent(item.StudentID))" value="Select" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
@code {
    private Student student;
    private Students students;
    protected override void OnInitialized() {
        student = new Student();
        students = new Students();
        stateService.OnStateChange += StateHasChanged;
    }
    void SelectedStudent(int stuid) {
        stateService.SetValue(stuid);
        navigationManager.NavigateTo("/studentdetails");
    }
    public void Dispose() {
        stateService.OnStateChange -= StateHasChanged;
    }
}

1. The StateContainerService and NavigationManager classes are injected into the component. The StateContainerService's details have already been seen. Methods for navigating between the components are offered by the NavigationManager class.

2. The Student and Students objects are initialized using the OnInitialized() function. The most crucial aspect of this function is the StateHasChanged() method, which allows the component to subscribe to the StateContainerService's OnStateChange event. The component's state has changed, according to the StateHasChanged() method. According to this subscription, if the state of the component changes, it notifies the state container service of the occurrence and ensures that the state property is updated with the new value.

3. The click event of the button element drawn inside the table is bound to the component class's SelectedStudent() method. To update the state, this function calls the SetValue() method of the StateContainerService class. The student details are then reached by the SelectedStudent() function.

4. The OnStateChange event is unsubscribed using the Dispose() function.

@page "/studentsreceivers"
@using Blazor_StateManagement.Models;
@inject StateService.StateContainerService stateService;
@implements IDisposable
@inject NavigationManager navigationManager;
<h3>Students Receiver</h3>
 
<div class="container">
    <h2>The Received Student Id is = @StuID</h2>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Subject Id</th>
                <th>Subject Name</th>
                <th>Student Id</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in subjects)
            {
                <tr>
                    <td>@item.SubjectID</td>
                    <td>@item.SubjectName</td>
                    <td>@item.StudentID</td>
 
                </tr>
            }
        </tbody>
    </table>
</div>
@code {
    private Subject subject;
    private List < Subject > subjects;
    private int StuID;
    protected override void OnInitialized() {
        Subject = new Subject();
        subjects = new List < Subject > ();
        StuID = stateService.Value;
        if (CatId == 0) {
            subjects = subject;
        } else {
            subjects = subject.Where(p => p.StudentID == StuID).ToList();
        }
    }
    public void Dispose() {
        stateService.OnStateChange -= StateHasChanged;
    }
}

The StateContainerService additionally injects the Studentreceiver component, the same as how it does with the Student details component. Utilizing the Value property of the StateContainerService class, the OnInitialized() method can retrieve the updated state. The student receives component filters the data for the Subject based on the Student information obtained from the State after receiving the changed state. Based on the StudentID, the Student details component renders products.

Conclusion

One of the essential characteristics of contemporary web applications is state management. The benefit of it is that frequent postbacks to the server can be avoided because the data is managed in the browser. State management is provided by the majority of front-end JavaScript libraries and frameworks, such as React, Angular, etc., by employing a Global State Container object (aka Store). Because Blazor apps (a Web Assembly project) are loaded and performed in the browser, state management using Global State Container Objects is simple to construct.