BlazorとFluxorでTodoを作った話

概要

C#でWebページが作れるBlazorで使ってみた時に詰まったところをまとめた記事です。状態管理のためにFluxorを使用しています。

作成したリポジトリはこちらです。Webページはこちら。

Redux Todos Exampleを参考にしています。

使用したバージョンなど

• .NET 5.0.9
• AspNetCore.Components.WebAssembly 5.0.9
• Fluxor.Blazor.Web 4.1.0

詰まったところ

FluxorでStateを更新しても画面が更新されない

@inherits Fluxor.Blazor.Web.Components.FluxorComponentを更新してほしいコンポーネントのrazorファイルの先頭に追加する。

VisibleTodoList.razor

@inherits Fluxor.Blazor.Web.Components.FluxorComponent

<TodoList Todos="@VisibleTodos()" OnClickMethod="@ToggleTodo"/>

メソッドを子コンポーネントに渡したい

EventCallbackを使用する。

VisibleTodoList.razor

@inherits Fluxor.Blazor.Web.Components.FluxorComponent

<TodoList Todos="@VisibleTodos()" OnClickMethod="@ToggleTodo"/>

TodoList.razor.cs

using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using Todos.Models;

namespace Todos.Components
{
    public partial class TodoList
    {

        [Parameter]
        public IEnumerable<TodoItem> Todos { get; set; }

        [Parameter]
        public EventCallback<int> OnClickMethod { get; set; }
    }
}

引数に値を渡したい場合はInvokeAsyncを使用する。

TodoList.razor

<ul>
    @foreach (var todo in Todos)
    {
        <Todo Text=@todo.Text Completed=@todo.Compleated OnClickMethod="@(() => OnClickMethod.InvokeAsync(todo.Id))" />
    }
</ul>

コンポーネントを親コンポーネントから受け取る

RenderFragmentを子コンポーネントのパラメータとして定義する。

Link.razor.cs

using Microsoft.AspNetCore.Components;

namespace Todos.Components
{
    public partial class Link
    {

        [Parameter]
        public RenderFragment ChildContent { get; set; }

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

        [Parameter]
        public EventCallback OnClickMethod { get; set; }
    }
}

Footer.razor

<div>
    <span>Show: </span>
    <FilterLink FilterType="@VisibilityFilterType.ShowAll">
        All
    </FilterLink>
    <FilterLink FilterType="@VisibilityFilterType.ShowActive">
        Active
    </FilterLink>
    <FilterLink FilterType="@VisibilityFilterType.ShowCompleted">
        Completed
    </FilterLink>
</div>

使ってみての感想

良かった点

• C#であるため、型があり補完等がきく
• 開発の環境構築が容易である
• 詰まったところはだいたいドキュメントに書いてあった

微妙だった点

• VisualStadioの警告が間違っている場合がある
  • 再起動で直るものの、わりと高頻度で起きる
• あんまりネットに使用例がない

参考にしたリンク集

• Fluxor Toutorials
  • https://github.com/mrpmorris/Fluxor/tree/master/Tutorials/02-Blazor
• ASP.NET Core Blazor の概要
  • https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-5.0