Options for State Management in Blazor

Question

What libraries/techniques are available in Blazor for State management for webassembly (wasm).

It would be nice to know pros and cons of different approaches.

Berwickupontweed

Answer 1

There are several options:

Redux (Fluxor)

Redux/Flux pattern has become a leader in state management in JS word; so it would make sense to adopt this best practice.

Luckily there is already a Fluxor library that does just that; and it does have the most github stars 379; although it is still a relatively new area; so it remains to be seen what ends up being the most adopted approach later on.

There is a great intro video along with source code

Official docs:

• State, actions, and reducers
• Effects
• Redux Dev Tools

An in depth article.

Blazor-State

Blazor-State

Pros: uses MediatR for messaging

See also

Overviews of State Management Approaches

https://chrissainty.com/mobile-blazor-bindings-state-management-and-data/

https://jonhilton.net/blazor-state-management/

https://learn.microsoft.com/en-us/aspnet/core/blazor/state-management

nice but mostly messaging: https://jasonwatmore.com/post/2020/07/30/aspnet-core-blazor-webassembly-communication-between-components

keywords: passing data between blazor wasm webassembly components child parent attributes events handling

Berwickupontweed

Answer 2

A Blazor app is a C# app on top of the .Net BCL libraries. We don’t need to emulate what the JavaScript world has created to overcome its own deficiencies. C# can cache anything you want with static members.

Lager

I've had a fair number of people get mad at me when I tell them to do Blazory stuff in Blazor. – Milker

If you could provide an example of how to this technique of using static members for state management to accomplish what the OP desires (or point to some documentation or guidance on this) I would very much appreciate it, thanks! – Mara

If you've used C# you've used static members. It works the same in blazor as it does in any other C# application – Lager

Nobody uses static members for things like state management. You don't have any isolation for your unit tests, and you have little control over the lifecycle of such values/instances. Dependency Injection is a much better approach. – Lamartine

This kind of misses the point. One thing is using static members to store data, another is the pattern you use for doing so. Redux pattern and its principles is well established in web application development for variety of reasons and has proven to be solid and sound. The "persistance layer" - be it static members, browser storage or whatever else - is irrelevant in this case. What matters is the overal state management design and flow. – Cabbagehead

You are generally right. Even if you use the new Blazor templates from .NET 8 with interactive WebAssembly, just adding a "static" to the private int currentCount = 0; in the Counter demo page leads to it not resetting back to 0 every time you visit that page. It is however not a good way for most applications where user state matters, as it will not persist across a simple page reload. Plus lack of isolation and what others have said. It literally isn't much more than a global variable in JS. – Read

Static members give you everything you need including great deal of simplicity over Redux or other complex implementations. You can choose to use raw static properties, OR you can hide the static members and control access via simple instance based access methods (to support testing etc). C'mon people, were all programmers - why adopt complex solutions when .Net gives use much simpler and mature options - this is one of the big benefits of Blazor – Lager

Using static members, how would you re-render components when the state changes ? – Melamie