« Fluxor » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « Category:Blazor = Links = * [https://github.com/mrpmorris/Fluxor Github] * [https://github.com/mrpmorris/Fluxor/blob/master/Docs/README.md Documentation] * [https://blog.antosubash.com/posts/state-management-blazor-fluxor Blazor state management with Fluxor] = Installation = <kode lang='bash'> dotnet add package Fluxor.Blazor.Web </kode> <filebox fn='Program.cs'> builder.Services .AddFluxor(options => options.ScanAssemblies(typeof(Program).Assembly)); <... ») |
(→Links) |
||
(3 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 4 : | Ligne 4 : | ||
* [https://github.com/mrpmorris/Fluxor/blob/master/Docs/README.md Documentation] | * [https://github.com/mrpmorris/Fluxor/blob/master/Docs/README.md Documentation] | ||
* [https://blog.antosubash.com/posts/state-management-blazor-fluxor Blazor state management with Fluxor] | * [https://blog.antosubash.com/posts/state-management-blazor-fluxor Blazor state management with Fluxor] | ||
* [https://dev.to/mr_eking/advanced-blazor-state-management-using-fluxor-part-5-14j2 Advanced Blazor State Management Using Fluxor - EditForm Binding] | |||
= Example = | |||
<filebox fn='Store/ItemSearchUseCase/ItemSearchCase.cs' collapsed> | |||
[FeatureState] | |||
public class TransactionsSearchState | |||
{ | |||
public string SearchText { get; } = string.Empty; | |||
public TransactionsSearchState(string searchText) | |||
{ | |||
SearchText = searchText; | |||
} | |||
// Required for creating initial state | |||
private TransactionsSearchState() | |||
{ } | |||
} | |||
</filebox> | |||
<filebox fn='Store/ItemSearchUseCase/ItemSearchAction.cs' collapsed> | |||
public class TransactionsSearchAction | |||
{ | |||
public string searchText { get; } = string.Empty; | |||
public TransactionsSearchAction(string searchText) | |||
{ | |||
this.searchText = searchText; | |||
} | |||
} | |||
</filebox> | |||
<filebox fn='Store/ItemSearchUseCase/Reducers.cs' collapsed> | |||
public class Reducers | |||
{ | |||
[ReducerMethod] | |||
public static ItemSearchState ReduceTransactionsSearchAction(ItemSearchState state, ItemSearchAction action) | |||
=> new(action.searchText); | |||
} | |||
</filebox> | |||
<filebox fn='Pages/Items.razor.cs'> | |||
public partial class Items : FluxorComponent | |||
{ | |||
[Inject] | |||
private IState<ItemSearchState> ItemSearchState { get; set; } | |||
[Inject] | |||
public IDispatcher Dispatcher { get; set; } | |||
// get the state | |||
ItemSearchState.Value.SearchText | |||
// update the state | |||
Dispatcher.Dispatch(new ItemSearchAction(searchText)); | |||
</filebox> | |||
<filebox fn='Pages/Items.razor'> | |||
@inherits Fluxor.Blazor.Web.Components.FluxorComponent | |||
</filebox> | |||
= Installation = | = Installation = | ||
Ligne 13 : | Ligne 73 : | ||
builder.Services | builder.Services | ||
.AddFluxor(options => options.ScanAssemblies(typeof(Program).Assembly)); | .AddFluxor(options => options.ScanAssemblies(typeof(Program).Assembly)); | ||
// options.UseReduxDevTools(); | |||
</filebox> | </filebox> | ||
Dernière version du 23 août 2023 à 11:10
Links
- Github
- Documentation
- Blazor state management with Fluxor
- Advanced Blazor State Management Using Fluxor - EditForm Binding
Example
Store/ItemSearchUseCase/ItemSearchCase.cs |
[FeatureState] public class TransactionsSearchState { public string SearchText { get; } = string.Empty; public TransactionsSearchState(string searchText) { SearchText = searchText; } // Required for creating initial state private TransactionsSearchState() { } } |
Store/ItemSearchUseCase/ItemSearchAction.cs |
public class TransactionsSearchAction { public string searchText { get; } = string.Empty; public TransactionsSearchAction(string searchText) { this.searchText = searchText; } } |
Store/ItemSearchUseCase/Reducers.cs |
public class Reducers { [ReducerMethod] public static ItemSearchState ReduceTransactionsSearchAction(ItemSearchState state, ItemSearchAction action) => new(action.searchText); } |
Pages/Items.razor.cs |
public partial class Items : FluxorComponent { [Inject] private IState<ItemSearchState> ItemSearchState { get; set; } [Inject] public IDispatcher Dispatcher { get; set; } // get the state ItemSearchState.Value.SearchText // update the state Dispatcher.Dispatch(new ItemSearchAction(searchText)); |
Pages/Items.razor |
@inherits Fluxor.Blazor.Web.Components.FluxorComponent |
Installation
dotnet add package Fluxor.Blazor.Web |
Program.cs |
builder.Services .AddFluxor(options => options.ScanAssemblies(typeof(Program).Assembly)); // options.UseReduxDevTools(); |
App.razor |
<Fluxor.Blazor.Web.StoreInitializer /> |