Add Redux

Author: linkdotnet

README.md

@@ -4,7 +4,8 @@ Contains all of my examples from various blog posts. You can find a comprehensiv
 
 | BlogPost                                                                                                       | Publish Date |
 | -------------------------------------------------------------------------------------------------------------- | ------------ |
-| [Blazor with TailwindCSS](BlazorWithTailwind/)                                                                 | 18.11.2023   |
+| [Redux Pattern in Blazor](ReduxBlazor/)                                                                        | 04.11.2023   |
+| [Blazor with TailwindCSS](BlazorWithTailwind/)                                                                 | 18.10.2023   |
 | [Structured Concurrency in C#](StructuredConcurrency/)                                                         | 11.10.2023   |
 | [Building a Minimal ASP.NET Core clone](AspNetCoreFromScratch/)                                                | 14.09.2023   |
 | [Enabling List<T> to store large amounts of elements](ChunkedList/)                                            | 07.09.2023   |

ReduxBlazor/App.razor

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

ReduxBlazor/AppReducer.cs

@@ -0,0 +1,13 @@
+using ReduxBlazor.Redux;
+
+namespace ReduxBlazor;
+
+public class AppReducer : IReducer<ApplicationState>
+{
+    private readonly CounterReducer _counterReducer = new();
+
+    public ApplicationState Reduce(ApplicationState state, IAction action)
+    {
+        return new ApplicationState(_counterReducer.Reduce(state.CounterState, action));
+    }
+}

ReduxBlazor/ApplicationState.cs

@@ -0,0 +1,3 @@
+namespace ReduxBlazor;
+
+public record ApplicationState(CounterState CounterState);

ReduxBlazor/CounterReducer.cs

@@ -0,0 +1,15 @@
+using ReduxBlazor.Redux;
+
+namespace ReduxBlazor;
+
+public class CounterReducer : IReducer<CounterState>
+{
+    public CounterState Reduce(CounterState state, IAction action)
+    {
+        return action switch
+        {
+            IncrementAction incrementAction => state with { Count = state.Count + incrementAction.Value },
+            _ => state
+        };
+    }
+}

ReduxBlazor/CounterState.cs

@@ -0,0 +1,3 @@
+namespace ReduxBlazor;
+
+public record CounterState(int Count = 0);

ReduxBlazor/IncrementAction.cs

@@ -0,0 +1,7 @@
+using ReduxBlazor.Redux;
+
+namespace ReduxBlazor;
+
+public record IncrementAction(int Value) : IAction
+{
+}

ReduxBlazor/Pages/Counter.razor

@@ -0,0 +1,19 @@
+@page "/counter"
+@inject Store Store
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @State.Count</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private CounterState State => Store.GetState().CounterState;
+
+    private void IncrementCount()
+    {
+        Store.Dispatch(new IncrementAction(1));
+    }
+}

ReduxBlazor/Pages/FetchData.razor

@@ -0,0 +1,60 @@
+@page "/fetchdata"
+@inject HttpClient Http
+
+<PageTitle>Weather forecast</PageTitle>
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+@if (forecasts == null)
+{
+    <p>
+        <em>Loading...</em>
+    </p>
+}
+else
+{
+    <table class="table">
+        <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+        </thead>
+        <tbody>
+        @foreach (var forecast in forecasts)
+        {
+            <tr>
+                <td>@forecast.Date.ToShortDateString()</td>
+                <td>@forecast.TemperatureC</td>
+                <td>@forecast.TemperatureF</td>
+                <td>@forecast.Summary</td>
+            </tr>
+        }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[]? forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
+    }
+
+    public class WeatherForecast
+    {
+        public DateOnly Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public string? Summary { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+
+}

ReduxBlazor/Pages/Index.razor

@@ -0,0 +1,9 @@
+@page "/"
+
+<PageTitle>Index</PageTitle>
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<SurveyPrompt Title="How is Blazor working for you?"/>