Managing your Blazor application state with Redux (.NET 8)

Name: Managing your Blazor application state with Redux (.NET 8)
Rating: 4.8 (16 reviews)

The best way to handle data from a front-end perspective, now in Blazor and C# !

Created byChristophe MOMMER | C# - .NET - Azure DevOps | MVP

Last updated 8/2023

English

What you'll learn

how to manage state within a Blazor app
how to create Redux store structure from scratch
how to connect Blazor components to centralized store
how to time travel with the help of Redux Dev Tools

Course content

4 sections • 20 lectures • 1h 45m total length

You can buy this course at a cheaper price!0:09
Introduction : who am I2:31
Learn to implement a Redux pattern from scratch within a blank Blazor application and manage its state with a Redux store.
Redux : The Big Picture4:09
Explore how Redux combines design patterns to manage front-end data, emphasizing immutable state, actions, and reducers that are pure functions, with effects explored later in the course.
Discovery tour of the demo application6:02
Explore a Blazor server demo app and learn how a Redux store manages employee data, enabling efficient CRUD operations while reducing API calls.

Let's create the state!5:13
Create an employee state in a class library, expose an IEnumerable of employees, use init properties, and convert to a record to enable immutable redux-style state for a Blazor UI.
Let's create the action!1:46
Create the employees loaded action to carry API-loaded employees, using a record for immutability, and hook it to a reducer to produce a new state version.
Let's create the reducer!3:25
Create a pure reducer mapping the employees loaded action to a new employee state using the with keyword for immutability, and wire a static initial state for the service.
Mixing everything together within a service4:05
Create a store service to manage the employee state in a Blazor redux setup, exposing state, handling actions with a reducer, and notifying subscribers via a state change event.
Use our service in our Blazor application6:27
Register a singleton store service in the Blazor app, inject it into components, and manage employee state by using cached data when available and dispatching an employees loaded action.
Exercise : implement the deletion of an employee5:54
Implement an employee deletion action and reducer in a Blazor redux-style store, call the API, and update the UI list and state on success.

Installation and configuration of the library4:42
Install the official Flux packages, configure the Flux store in program.cs with scan assemblies, and initialize it in app.razor, using future state and reducer method attributes.
How to use the library within Blazor components4:32
Replace the old store with flexor by using the estate of state and the eye dispatcher to dispatch actions to reducers, loading 14 employees and Luxor for employee details component.
Exercise : implements the get employee's informations with the library7:31
Learn to load employee data in a Blazor app using Redux-style Fluxor, with actions, reducers, and dispatcher, including subscription and disposal to prevent memory leaks.
Using effects for asynchronous stuff5:09
Learn to move API calls out of Blazor components by using effects in Redux-style state management; create asynchronous effects, dispatch load employees actions, inject dependencies, and update state via effects.
Exercise : implements the deletion of an employee by using an effect4:47
Implement deletion of an employee with a delete employee action and effect, dispatch the action via the component, and move api calls to the effect using an http client factory.
Using the ReduxDevTools to time travel !6:19
Learn to enable and use the Redux DevTools for time travel in a Blazor app, configure Fluxor with Redux DevTools, observe actions and state changes, and handle production deployment.
Use middelware to inject code at specific time6:43
Implement middleware to log actions in a Blazor flux store. Create a login middleware, override initialize async, and use before/after dispatch to log action types, then register via program.cs.

Pizza store : introduction3:54
Explore implementing a Redux store in a Blazor pizza app to improve performance, handling add to basket, admin edits, and synchronized price updates across UI and API.
Pizza store : part 18:50
Set up a Blazor Redux store scaffold by creating a class library, enabling feature state for pizzas and basket, and defining actions and reducers for loading, adding, and removing items.
Pizza store : part 213:00
Manage your Blazor application's state with redux-like Fluxo, wiring pizzas, basket actions, and pizza updates through effects and reducers.

Requirements

basics of C#
basics of Blazor

Description

Managing your application state in a Blazor application can be tedious. If you want to do it with native way, you'd need to (ab)use of parameters and callbacks to communicate between components.

Redux is a powerful and widely used library in the JavaScript community that helps you organize your front-end data the best way it can be. In this course, we are going to learn FROM SCRATCH how you can implement a Redux store pattern in your Blazor app !

In the first module, we'll start from a classic Blazor app that communicates with an API. We'll quickly see what are the main issues with this way of creating Blazor. In this module, we will:

Create our first state from a blank C# class file
Create our first action from a blank C# class file
Create our first reducer from a blank C# class file
Create the service that will be used in our Blazor components
Modify the list component to use our Redux implementation
Exercise : try to update the list component for the delete action by using our Redux implementation

At the end of this first module, you'll understand the basics of a Redux implementation and how it can enhance your application performance.

The second module will be focused on using an open-source rock-solid library to enhance our implementation. You'll learn:

How to install and configure this library
How to mutate our state and reducer to be compatible with this library
Exercise : try to update the list component to use the open-source library
Adding effects, a special kind of reducer, to handle asynchronous needs
Exercise : try to update the list component to use effect and respect the first SOLID principle (Single Responsibility)
Enable ReduxDevTools to be able to time travel with your application
Creating a middleware for the library to add custom behavior easily

At the end of this second module, you'll understand how to use this library effectivly and you'll be autonomous to implement a Redux store in your Blazor app.

To verify that you've mastered everything in the course, a complete independent exercise will the third and last module of the course, to let you practice.

Who this course is for:

C# developers

Managing your Blazor application state with Redux (.NET 8)

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 13min

Create your Redux store FROM SCRATCH6 lectures • 27min

Create your Redux store using an open-source library7 lectures • 40min

Complete exercise : pizza store3 lectures • 26min

Requirements

Description

Who this course is for: