C# Academy · Pelajaran

Pengelolaan Status di Blazor

Kelola status bersama dengan singleton layanan, Fluxor, atau AppState berjenjang agar antarmuka tetap konsisten di seluruh komponen.

Pelajaran 4 dari 412 langkah

Pengelolaan Status di Blazor adalah pelajaran C# Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar C# Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus C# Academy mencakup 4 pelajaran total.

Tantangan Pengelolaan State di Blazor

Seiring aplikasi Blazor berkembang, pengelolaan state yang harus dibagikan oleh banyak komponen yang tidak saling berkaitan menjadi rumit. Penerusan properti secara berantai tidak lagi memadai; Anda memerlukan penyimpanan state terpusat yang reaktif.

State Sederhana dengan Layanan Berscope

Pendekatan paling sederhana untuk pengelolaan state Blazor: layanan berscope yang menyimpan state dan menyediakan peristiwa agar komponen dapat berlangganan perubahan.

public class CartState
{
    private readonly List<CartItem> _items = new();
    public IReadOnlyList<CartItem> Items => _items;
    public int Count => _items.Sum(i => i.Quantity);

    public event Action? OnChanged;

    public void Add(Product p)
    {
        var existing = _items.FirstOrDefault(i => i.ProductId == p.Id);
        if (existing is not null) existing.Quantity++;
        else _items.Add(new CartItem { ProductId = p.Id, Name = p.Name, Price = p.Price });
        OnChanged?.Invoke();
    }
}

Berlangganan Perubahan State

Komponen berlangganan peristiwa OnChanged milik layanan state dan memanggil StateHasChanged untuk merender ulang. Ingatlah untuk berhenti berlangganan di Dispose.

@inject CartState Cart
@implements IDisposable

<p>Cart: @Cart.Count items</p>

@code {
    protected override void OnInitialized()
    {
        Cart.OnChanged += OnCartChanged;
    }

    private void OnCartChanged()
    {
        InvokeAsync(StateHasChanged);
    }

    public void Dispose() =>
        Cart.OnChanged -= OnCartChanged;
}

CascadingValue sebagai Wadah State

Bungkus tata letak root Anda dalam CascadingValue bersama layanan state Anda. Semua turunannya dapat mengaksesnya tanpa meneruskan properti secara eksplisit.

@* MainLayout.razor *@
@inject CartState Cart

<CascadingValue Value="Cart">
    @Body
</CascadingValue>

@* Any nested component: *@
@code {
    [CascadingParameter]
    public CartState Cart { get; set; } = default!;

    private void Buy(Product p) => Cart.Add(p);
}

Fluxor: Pola Flux untuk Blazor

Fluxor menghadirkan aliran data satu arah bergaya Redux ke Blazor: State → Component → Action → Reducer → State. Sangat cocok untuk aplikasi yang kompleks.

// dotnet add package Fluxor.Blazor.Web

// State record
[FeatureState]
public record CounterState(int Count = 0);

// Actions
public record IncrementAction(int Amount = 1);

// Reducers
public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState Reduce(CounterState state, IncrementAction action)
        => state with { Count = state.Count + action.Amount };
}

// Registration:
builder.Services.AddFluxor(opt =>
    opt.ScanAssemblies(typeof(Program).Assembly));

Menggunakan Fluxor dalam Komponen

Suntikkan IState<T> untuk membaca state dan IDispatcher untuk mengirimkan action. InheritsFrom<FluxorComponent> (atau mixin tersebut) secara otomatis berlangganan perubahan state.

@inherits FluxorComponent
@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

<p>Count: @CounterState.Value.Count</p>
<button @onclick="Increment">+1</button>
<button @onclick="() => Dispatcher.Dispatch(new IncrementAction(5))">+5</button>

@code {
    private void Increment()
        => Dispatcher.Dispatch(new IncrementAction(1));
}

Persistensi LocalStorage

Simpan state agar tetap ada setelah penyegaran halaman menggunakan localStorage browser melalui interop JavaScript. Pulihkan state tersebut saat aplikasi dimulai.

@inject IJSRuntime JS

@code {
    private async Task SaveStateAsync()
    {
        var json = JsonSerializer.Serialize(_state);
        await JS.InvokeVoidAsync("localStorage.setItem", "appState", json);
    }

    protected override async Task OnInitializedAsync()
    {
        var json = await JS.InvokeAsync<string?>("localStorage.getItem", "appState");
        if (json is not null)
            _state = JsonSerializer.Deserialize<AppState>(json) ?? new();
    }

    private AppState _state = new();
}

Paket Blazored.LocalStorage

Paket Blazored.LocalStorage menyediakan API yang rapi dan bertipe untuk localStorage browser tanpa harus menulis panggilan interop JS secara manual.

// dotnet add package Blazored.LocalStorage
builder.Services.AddBlazoredLocalStorage();

@inject ILocalStorageService LocalStorage

@code {
    protected override async Task OnInitializedAsync()
    {
        _cart = await LocalStorage.GetItemAsync<List<CartItem>>("cart") ?? new();
    }

    private async Task SaveCartAsync()
    {
        await LocalStorage.SetItemAsync("cart", _cart);
    }

    private List<CartItem> _cart = new();
}

State URL dengan NavigationManager

Gunakan parameter kueri untuk menyimpan state yang harus tetap ada setelah penyegaran halaman dan dapat disimpan sebagai markah. Baca dan tulis parameter tersebut melalui NavigationManager dan pembangun URI.

@inject NavigationManager Nav
@page "/products"

@code {
    [SupplyParameterFromQuery] public string? Search { get; set; }
    [SupplyParameterFromQuery] public int Page { get; set; } = 1;

    private void UpdateSearch(string s)
    {
        Nav.NavigateTo(
            Nav.GetUriWithQueryParameters(
                new Dictionary<string, object?>
                {
                    [nameof(Search)] = s,
                    [nameof(Page)]   = 1
                }));
    }
}

Dunia Nyata: State Keranjang Belanja

Pola lengkap: layanan CartState berscope dengan berbagai peristiwa, disimpan ke localStorage setiap kali terjadi perubahan, dan dipulihkan saat dimuat.

public class CartState
{
    private readonly ILocalStorageService _storage;
    private List<CartItem> _items = new();
    public event Action? OnChanged;

    public CartState(ILocalStorageService storage) => _storage = storage;

    public async Task InitAsync()
    {
        _items = await _storage.GetItemAsync<List<CartItem>>("cart") ?? new();
    }

    public async Task AddAsync(Product p)
    {
        var item = _items.FirstOrDefault(i => i.ProductId == p.Id);
        if (item is not null) item.Quantity++;
        else _items.Add(new CartItem { ProductId = p.Id, Name = p.Name });
        await _storage.SetItemAsync("cart", _items);
        OnChanged?.Invoke();
    }
}

Pemeriksaan Singkat

Pendekatan pengelolaan state apa yang paling sesuai untuk aplikasi Blazor sederhana dengan state bersama yang terbatas?

Ringkasan: Pengelolaan State di Blazor

Inti pembelajaran:

  • Layanan berscope + peristiwa Action: state bersama paling sederhana dan cocok untuk sebagian besar aplikasi
  • CascadingValue yang membungkus root menyediakan akses di seluruh aplikasi tanpa meneruskan properti secara berantai
  • Fluxor: aliran satu arah bergaya Redux untuk logika state yang kompleks
  • Simpan state ke localStorage dengan IJSRuntime atau Blazored.LocalStorage
  • State URL (SupplyParameterFromQuery) untuk state UI yang dapat disimpan sebagai markah dan dibagikan
  • Selalu berhenti berlangganan dari berbagai peristiwa di Dispose untuk mencegah kebocoran memori
Gratis untuk memulai

Belajar C# dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
93
Pelajaran
346

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengelolaan Status di Blazor” gratis?

Ya — teks lengkap “Pengelolaan Status di Blazor” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus C# Academy, upgrade ke CoddyKit PRO. Kursus C# Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengelolaan Status di Blazor”?

Kelola status bersama dengan singleton layanan, Fluxor, atau AppState berjenjang agar antarmuka tetap konsisten di seluruh komponen. Kamu berlatih C# Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai C# Academy?

Tidak diperlukan pengalaman sebelumnya. C# Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pengelolaan Status di Blazor” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran C# Academy ini?

Ya. Setiap pelajaran C# Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Model Komponen Blazor
  2. Pengikatan Data & Penanganan Peristiwa
  3. Komunikasi Komponen & DI
  4. Pengelolaan Status di Blazor
← Kembali ke C# Academy