{"id":11394,"date":"2025-04-18T12:54:32","date_gmt":"2025-04-18T12:54:32","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=11394"},"modified":"2025-04-18T12:54:32","modified_gmt":"2025-04-18T12:54:32","slug":"using-the-flux-pattern-fluxor-with-blazor","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/using-the-flux-pattern-fluxor-with-blazor\/","title":{"rendered":"Using the flux pattern (Fluxor) with Blazor"},"content":{"rendered":"<p>If you&#8217;ve done much with the likes of React you&#8217;ll probably know about the Flux pattern and implementations thereof, such as Redux and the Redux Toolkit (RTK). Well, There&#8217;s an implementation of the pattern for Blazor named <a href=\"https:\/\/github.com\/mrpmorris\/Fluxor\/tree\/master\" target=\"_blank\">Fluxor<\/a>, let&#8217;s take a look at using this in our Blazor application.<\/p>\n<p><em>Note: I&#8217;m using .NET 9 for this sample project.<\/em><\/p>\n<p>I&#8217;m going to be leaning heavily on the Fluxor Tutorials to get started, so I&#8217;d definitely recommend checking them out.<\/p>\n<ul>\n<li>Create yourself a Blazor application or use an existing one, I&#8217;m using a Blazor Standalone application for this post.<\/li>\n<li>Add the NuGet packages\n<ul>\n<li>Fluxor<\/li>\n<li>Fluxor.Blazor.Web<\/li>\n<li>Fluxor.Blazor.Web.ReduxDevTools<\/li>\n<\/ul>\n<li>\nIn Program.cs add the line<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nbuilder.Services.AddFluxor(options =&gt; \r\n   options.ScanAssemblies(typeof(Program).Assembly));\r\n<\/pre>\n<\/li>\n<li>Add the following to the start of the App.razor file\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;Fluxor.Blazor.Web.StoreInitializer\/&gt;\r\n<\/pre>\n<p>This initializes the store.\n<\/li>\n<\/ul>\n<p>At this point we have the basics in place to use Fluxor, but now let&#8217;s see the store in work. <\/p>\n<p>We&#8217;re going to start by implementing state for the sample Counter page. Again, please refer to the Fluxor Tutorials that cover this in more detail than I&#8217;m going to. <\/p>\n<p><strong>The Flux pattern<\/strong><\/p>\n<p>The <a href=\"https:\/\/facebookarchive.github.io\/flux\/docs\/in-depth-overview\/\" target=\"_blank\">In Depth Overview<\/a> is a useful starting point as is <a href=\"https:\/\/github.com\/mrpmorris\/Fluxor\/blob\/master\/Docs\/README.md\" target=\"_blank\">The Fluxor Documentation<\/a> to understand the Flux pattern.<\/p>\n<p>Before we get into the code, let&#8217;s just review our understanding and expectations of Fluxor and the Flux pattern in general.<\/p>\n<p>One important things to remember is function\/methods such as the reducers should be pure functions. Data should therefore be immutable in that the data you send into the store and this any returned data will be a copy with any changes made on the copy.<\/p>\n<p>Using the Blazor sample Counter page we have this workflow<\/p>\n<ul>\n<li>Page intializes, we display an initial count<\/li>\n<li>When the user clicks the button, we <em>Dispatch<\/em> an <em>action<\/em> via the <em>Dispatcher<\/em><l to a <em>reducer<\/em> which then gets stored within the state.<\/li>\n<li>The state updates so that anything watching it can update, hence the state updates and the UI then updates<\/li>\n<ul>\n<p><strong>Some code<\/strong><\/p>\n<p>Let&#8217;s be a little boring and use the Counter.razor sample code.<\/p>\n<p>First off we&#8217;re create our CounterState.cs file<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&#x5B;FeatureState]\r\npublic class CounterState\r\n{\r\n    public int ClickCount { get; }\r\n\r\n    private CounterState() { } \r\n\r\n    public CounterState(int clickCount)\r\n    {\r\n        ClickCount = clickCount;\r\n    }\r\n}\r\n<\/pre>\n<p>We need a default ctor for initialization if the state, but this can be private. The other constructor will be used to create a new copy of the counter state.<\/p>\n<p>I&#8217;m going to stick to just using the .razor file, so within Counter.razor I&#8217;ve added<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n@inject IState&lt;CounterState&gt; CounterState\r\n@inject IDispatcher Dispatcher\r\n<\/pre>\n<p>Now we can simply using the following to get the current state<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n@CounterState.Value.ClickCount\r\n<\/pre>\n<p>When we click a button we&#8217;ll dispatch an action <em>IncrementCounterAction<\/em> like this<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nprivate void IncrementCount()\r\n{\r\n   Dispatcher.Dispatch(new IncrementCounterAction());\r\n}\r\n<\/pre>\n<p>Where <em>IncrementCounterAction<\/em> is simply as follows<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\npublic class IncrementCounterAction;\r\n<\/pre>\n<p>Finally we need a reducer which accepts this action and this creates a copy of our updated data like this<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\npublic static class Reducers\r\n{\r\n    &#x5B;ReducerMethod(typeof(IncrementCounterAction))]\r\n    public static CounterState ReduceIncrementCounterAction(CounterState state) =&gt;\r\n        new CounterState(clickCount: state.ClickCount + 1);\r\n}\r\n<\/pre>\n<p>We can write a reducer in a couple of other ways, for example<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\npublic static class Reducers\r\n{\r\n   &#x5B;ReducerMethod]\r\n   public static CounterState ReduceIncrementCounterAction(CounterState state, IncrementCounterAction action) =&gt;\r\n      new CounterState(clickCount: state.ClickCount + 1);\r\n}\r\n<\/pre>\n<p>Or as follows<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\npublic class IncrementCounterReducer : Reducer&lt;CounterState, IncrementCounterAction&gt;\r\n{\r\n   public override CounterState Reduce(CounterState state, IncrementCounterAction action) =&gt;\r\n      new CounterState(clickCount: state.ClickCount + 1);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve done much with the likes of React you&#8217;ll probably know about the Flux pattern and implementations thereof, such as Redux and the Redux Toolkit (RTK). Well, There&#8217;s an implementation of the pattern for Blazor named Fluxor, let&#8217;s take a look at using this in our Blazor application. Note: I&#8217;m using .NET 9 for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[305],"tags":[],"class_list":["post-11394","post","type-post","status-publish","format-standard","hentry","category-blazor"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=11394"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11394\/revisions"}],"predecessor-version":[{"id":11434,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11394\/revisions\/11434"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}