Blazor和Vue對比學習（進階2.2.3）：狀態管理之狀態共用，Blazor的依賴注入和第三方庫Fluxor

//先建立一個儲存庫類
public class CountState
{
    public int Count { get; set; } = 0;
    public void AddCount()
    {
        Count++;
    }
}



//在服務容器中注入
builder.Services.AddSingleton<CountState, CountState>();



//在元件中注入服務，並使用
@page "/counter"
@inject CountState countState

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p">Current count: @countState.Count</p>
<button @onclick="IncrementCount">點選增加</button>
<CounterChild></CounterChild>

@code {
    private void IncrementCount()
    {
        countState.AddCount();
    }
}



//子元件CounterChild，用於測試儲存庫物件資料更新時，其它參照元件是否可以響應式更新
//結論：不能響應式更新
@inject CountState countState
<h3>@countState.Count</h3>
<button @onclick="()=>{countState.Count++;}">在Child中點選增加/button>

//===========================================================================
//①狀態類CounterState
using Fluxor;
namespace StateManageFluxor.Store.Counter
{
    //狀態State類，需要標註FeatureState特性
    [FeatureState]
    public class CounterState
    {
        //定義了一個Count狀態資料，必須為唯讀
        public int Count { get; }
        public CounterState(int count)
        {
            Count = count;
        }

        //初始化Store時，系統呼叫，建議私有，必須有
        private CounterState() { Count = 0; }
    }
}




//==================================================================================================
//②操作類Reducer，類似於Pinia中的Action，用於操作狀態State
//建議為靜態類和靜態方法
//可以寫多個Reducer，每個操作方法標註ReducerMethod特性
using Fluxor;

namespace StateManageFluxor.Store.Counter
{
    public static class CounterReducer
    {
        //狀態count遞增1操作
        //接收兩個引數，一個是原state，一個是信使action
        [ReducerMethod]
        public static CounterState ReduceIncrCountAction(CounterState state, IncrCountAction action)
        {
            return new CounterState(count: state.Count + 1);
        }

        //狀態count遞減1操作
        [ReducerMethod]
        public static CounterState ReduceDecrCountAction(CounterState state, DecrCountAction action)
        {
            return new CounterState(count: state.Count - action.DecrNum);
        }

        //如果信使不傳遞引數，還可以寫成如下格式：
        //[ReducerMethod(typeof(IncrCountAction))]
        //public static CounterState ReduceIncrCountAction(CounterState state)
        //{
        //    return new CounterState(count: state.Count + 1);
        //}
    }
}



//================================================================================================
//③事件類Action（稱它為信使）
//一個Reducer對應一個Action
//在元件中，通過Fluxor提供的Dispatcher/排程者，釋放信使Action
//信使傳遞訊號給相應的Reducer，通知它執行，並根據需要傳遞引數

//信使IncrCountAction，一個空類，不傳遞引數
namespace StateManageFluxor.Store.Counter
{
    public class IncrCountAction
    {
    }
}

//信使DecrCountAction，定義了一個DecrNum屬性
//排程者釋放信使時，可以定義DecrNum值，傳遞資訊
namespace StateManageFluxor.Store.Counter
{
    public class DecrCountAction
    {
        public int DecrNum { get; set; }
        public DecrCountAction(int decrNum)
        {
            DecrNum = decrNum;
        }
    }
}

//參照需要的三個名稱空間，可以統一放到_Imports.razor中
@using Fluxor
@using Microsoft.AspNetCore.Components
@using StateManageFluxor.Store.Counter

//注入儲存庫的State，CounterState
@inject IState<CounterState> CounterState

//注入Fluxor提供的排程者物件Dispatcher
//用於釋放信使Action
@inject IDispatcher Dispatcher

//繼承Fluxor提供的一個元件內
//「只有」繼續了這個類，元件才能實現響應式更新
@inherits Fluxor.Blazor.Web.Components.FluxorComponent

@page "/counter"

<p>Current count: @CounterState.Value.Count</p>

<button @onclick="IncrCount">增加</button>
<button @onclick="DecrCount">減少</button>

@code {
    //IncrCount方法中，排程者釋放一個空的信使IncrCountAction
    private void IncrCount()
    {
        var action = new IncrCountAction();
        Dispatcher.Dispatch(action);
    }

    //DecrCount方法中，排程者釋放一個攜帶資訊的信使DecrCountAction
    private void DecrCount()
    {
        var action = new DecrCountAction(2);
        Dispatcher.Dispatch(action);
    }
}

//注入儲存庫的State
@inject IState<CounterState> CounterState

//繼承Fluxor提供的一個元件類，這樣才可以實現響應式更新
@inherits Fluxor.Blazor.Web.Components.FluxorComponent

<div class="top-row ps-3 navbar navbar-dark">
    ............
            <NavLink class="nav-link" href="counter">
                 @($"Counter( {CounterState.Value.Count} )")
            </NavLink>
    ............
</div>

@code {
    ......
}

//①首先，我們新增一個Reducer，這個Reducer是非同步任務完成後，要執行的狀態操作
//開啟檔案Store/Counter/CounterReducer.cs，新增以下方法
//這個操作相對於遞增1操作來設計
//假設非同步任務完成前，遞增1；非同步任務完成後，遞增10
[ReducerMethod]
public static CounterState ReduceIncr10CountAction(CounterState state, Incr10CountActionAsync action)
{
     return new CounterState(count: state.Count + 10);
}



//②然後，新增一個信使類Incr10CountActionAsync，不用傳遞引數，所以一個空類就可以
namespace StateManageFluxor.Store.Counter
{
    public class Incr10CountActionAsync
    {
    }
}



//③最後，新增一個Effect類CounterEffect.cs，進行非同步操作
//注入信使IncrCountAction，非同步任務完成後，釋放新的信使。Action/Effect/Reducer，如果配對？關鍵一是[EffectMethod]特殊，關鍵2是Action。
//在這個Effect類中，可以根據需要，注入其它服務
using Fluxor;
namespace StateManageFluxor.Store.Counter
{
    public class CounterEffect
    {
        [EffectMethod(typeof(IncrCountAction))]
        public async Task IncrCountAsync(IDispatcher Dispatcher)
        {
            await Task.Delay(1000);
            var action = new Incr10CountActionAsync();
            Dispatcher.Dispatch(action);
        }
    }
}



//第③步的另外一種寫法
//如果需要使用信使IncrCountAction攜帶的引數，則使用這種寫法
using Fluxor;
namespace StateManageFluxor.Store.Counter
{
    public class CounterEffect
    {
        [EffectMethod(typeof(IncrCountAction))]
        public async Task IncrCountAsync(IDispatcher Dispatcher, IncrCountAction action)
        {
            await Task.Delay(1000);
            var action = new Incr10CountActionAsync();
            Dispatcher.Dispatch(action);
        }
    }
}