Managing Blazor state using Redux | Blazor Tutorial 11

Hello everybody I'm Nick and in this Blazor tutorial I will show you how to use the Redux approach in order to implement more effective state application management for our Blazor application. There are many advantages in used this approach while using Blazor with the main one being that our state updates become predictable and easier to manage as our application becomes bigger. I am going to be using a GitHub open source package called Fluxor.

Don't forget to comment, like and subscribe :)

Social Media:

#blazor #tutorial #redux #flux

[diegoronkkomaki]

I have a task/todolist project created in Blazor which relies in EventCallBack<T> properties inside the components, and because of nested components there can be situations where I have to pass down a mutated object through the EventCallBacks of 3 different components until the data finally reaches the component that needs to know about the new state. I think this library might help me get rid of that architecture/pattern. I'll definitely give this one a try.

[jshin]

This is just freaking awesome. I think it can replace the notifier approach described by Microsoft to communicate state across component boundaries. The notifier approach becomes a pain pretty easily the more notifiers are used.

[DJ-wqbv]

Just getting my feet wet on Blazor and this video was a tremendous help.. thanks very much Nick! And thanks to Peter Morris for Blazor Fluxor!

[Imonfire]

Nick love your vids, favorite coding channel by far

[jradplowman]

Your videos are very clear and well spoken! I am using Rider because of your comparison video and am absolutely loving it.

That said I am coming from a mixed ASP.NET / Vue.js project and this seems soooo complicated when you compare it to JS state management. I am really concerned because on average we have dozens of actions and getters for even a simple configuration page. My company is very interested in Blazor and I may use this video to convince them not to use it ;-)

[israell]

Great video Nick, exactly what I was looking for !!

[fredrikblomqvist]

What a great tutorial. Thank you very much Nick!

[brkes]

Thank you, Nick, all your videos are really great and useful!

[KasperSOlesen]

Very nice. I was looking for something like this. I am using a static class right now.

[nstohler]

Great video! But how do you split a realistic sized app into state? Where we have a lot of data coming from a database coming in through some WebAPI, some of which will be read only, but some we might want to display in some master/detail components and maybe even let the users change it. So there might be things like CurrentlySelectedToDoItem, CurrentlyEditingToDoItem and so on. And then the currently logged in user which we want to display on every page plus some global site settings (dark/light theme, and other site preferences).

[robertmrobo]

I think approaching state management in Blazor apps can be better implemented using Akita approach than Redux. Akita is based on object-oriented design principles rather than functional programming, so developers with OOP experience should feel right at home.

I am about to create a small port of Akita for Blazor. I will be doing so as part of learning Blazor.

[tamasveingartner]

what happened with the "navigation" project part? Is there a demo for that somewhere? I need to create a wizard style webpage where states of different pages should be stored while navigating back and forth in the wizard

[ZerX]

Great video, seen a few of your vids ending up in my feed. Sub'd.

[DegtyarevDaniil]

Thank you! Is it a good idea use c# records as state, these are immutable by default?

[rafaelfabro]

Would I need this even though I just want to preserve the state between components within a single page?

[drewfyre]

I dont understand why I should use this? Why not just register a "CounterState" or "CounterService", or whatever you wanna call it, as a Singleton in the ServiceCollection and then inject it into the component. It has the same effect but you dont need any of that boilerplate Am I missing a point here?

[JasonHoningford]

We need a real world example, like a shopping cart or even just a simple form. I have a document search app and what I'd like to do is persist the user input, i.e. searchCriteria. I'm expecting something like Session["searchCriteria"] = searchCriteria, but Fluxor seems to want me to create 5 new classes and move code around. That doesn't seem feasible.

[artdove]

Super clear and super helpful!!! Thanks!!!

[johnernest]

I want secure per-user or per-session if unauthenticated persistent server-side session state, so that once an anonymous user decides or needs to register he or she does not lose their place after other security measures like email confirmation or two-factor authentication. If I was picking out items in a shopping cart, or trying to download a piece of software, or reading an article and about to review or comment. This is one of the greatest annoyances of modern web development, so I am wondering how feasible a working solution is with this approach to state management.

[smatthews]

Are there any significant changes to this code using a Partial Class code behind for the Counter.razor page?