Advanced Blazor State Management Using Fluxor, part 1 - Introduction
Tags: csharp, blazor
Published: 2021-03-06 23:31:33

> This is the first in a short series of blog posts where I will go beyond the introductory level and dig a bit deeper into using the Fluxor library in a Blazor Wasm project. 

If you have written any application using Microsoft's [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) SPA (single-page application) framework, you will have immediately encountered the challenge of maintaining the state of your application's components while navigating around the application. The out-of-the-box template provides no mechanism for managing state, nor any guidance for how to start.

This can be easily seen using the template's example "Counter" page. Click on the button and see the counter increment. If you navigate away and come back, that previous counter state is lost as the component resets.

![Counter component losing state after navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylqvr726a12y4on5pj95.gif)

If you want to maintain that component's state, it's up to the developer to determine how.

There are a number of resources that introduce the basics of Blazor state management, including [this great video](https://www.youtube.com/watch?v=GIupo55GTro) from the [dotNET YouTube channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw) featuring Carl Franklin:

{% youtube GIupo55GTro %}

In the video, Carl demonstrates one strategy for managing and interacting with application state by creating a "AppState" service and a cascading parameter that all of the components can reference. Good stuff.

But, since Blazor is essentially a SPA, it's useful to consider how other SPA frameworks manage state. For instance, how does [React](https://reactjs.org/) do it? As it turns out, there are a lot of state management libraries that can be used with React, but one of the original (and still most commonly used) libraries is [Redux](https://redux.js.org/). 

Redux uses a an architectural pattern called [Flux](https://facebook.github.io/flux/), introduced by Facebook developers several years ago to help them manage the growing complexity of the Facebook application. There's a great video on YouTube where the Facebook engineering team explain how and why they developed the Flux pattern alongside React:

{% youtube nYkdrAPrdcw %}

[The Flux pattern](https://github.com/facebook/flux/tree/master/examples/flux-concepts) is distinguished by its unidirectional flow of changes to a `Store` that holds the application `State`, mediated by a `Dispatcher` that directs dispatched `Actions` to the appropriate Store functions (`Reducers` and `Effects`) that manage the State in a controlled manner.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3g6dnx5msrlgf8iy2m7.png)

Is it possible to use the Flux pattern with Blazor? Sure it is. There are a couple of libraries that have been written to implement Flux in .NET, and the one that seems to have the most traction and which I have enjoyed using is [Fluxor](https://github.com/mrpmorris/Fluxor), by Peter Morris.

{% github mrpmorris/fluxor %}

I first learned of Fluxor via this video from Nick Chapsas, as part of his excellent Blazor Tutorial series:

{% youtube k_c-ErPaYa8 %}

Nick has a great way of explaining concepts, and this video is no exception as he does an excellent job introducing an early version of the Fluxor library. Unfortunately, things move fast in the software development world, and the video is becoming a bit out-of-date as Fluxor has changed since November of 2019.

Finally, I watched this SSW TV video where [Chris Clement](https://www.ssw.com.au/people/chris-clement) demonstrates how [new C# 9 features](https://devblogs.microsoft.com/dotnet/c-9-0-on-the-record/) such as `record` can make Fluxor even easier and more enjoyable to use:

{% youtube sAyH-O0dFaI %}

It was this last video that convinced me to give Fluxor a try. I'm glad I did.

However, as is the case with many introductory videos and tutorials, these only touch on the very basics of the topic. As I've developed more Blazor code, I've come across a number of cases that these introductions don't address, and some Fluxor features that they don't explain. I've also developed some conventions for code organization that I think are useful for any Blazor application that has more than a few features.

I'll share these insights in a series of blog posts, and the code on github. Please share your thoughts, and happy coding!