var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var s in e)l(n,s,{get:e[s],enumerable:!0})},i=(n,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!k.call(n,t)&&t!==s&&l(n,t,{get:()=>e[t],enumerable:!(c=m(e,t))||c.enumerable});return n};var w=(n,e,s)=>(s=n!=null?h(N(n)):{},i(e||!n||!n.__esModule?l(s,"default",{value:n,enumerable:!0}):s,n)),b=n=>i(l({},"__esModule",{value:!0}),n);var r=g((v,o)=>{o.exports=_jsx_runtime});var I={};f(I,{default:()=>F,frontmatter:()=>y});var a=w(r()),y={title:"Blazor state management with Fluxor",excerpt:"In this post we will see how to setup fluxor in Blazor Wasm App",date:"2022-06-01",videoId:"yM9F8rxo8L8",tags:["blazor","fluxor"]};function d(n){let e=Object.assign({h2:"h2",a:"a",span:"span",p:"p",pre:"pre",code:"code",ul:"ul",li:"li",h3:"h3"},n.components),{YoutubeVideo:s,TOCInline:c}=e;return c||p("TOCInline",!0),s||p("YoutubeVideo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s,{videoId:n.videoId}),(0,a.jsx)(c,{toc:n.toc,asDisclosure:!0}),(0,a.jsxs)(e.h2,{id:"what-is-fluxor",children:[(0,a.jsx)(e.a,{href:"#what-is-fluxor","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"What is Fluxor"]}),(0,a.jsxs)(e.p,{children:["Fluxor is a zero boilerplate Flux/Redux library for .Net. The aim of Fluxor is to create a multi-UI, single-state store approach to front-end development without the headaches typically associated with other implementations, such as the overwhelming amount of boiler-plate code required just to add a very basic feature. Repo: ",(0,a.jsx)(e.a,{href:"https://github.com/mrpmorris/Fluxor",children:"https://github.com/mrpmorris/Fluxor"})," Docs: ",(0,a.jsx)(e.a,{href:"https://github.com/mrpmorris/Fluxor/blob/master/Docs/README.md",children:"https://github.com/mrpmorris/Fluxor/blob/master/Docs/README.md"})]}),(0,a.jsxs)(e.h2,{id:"when-to-use-fluxor",children:[(0,a.jsx)(e.a,{href:"#when-to-use-fluxor","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"When to use Fluxor"]}),(0,a.jsx)(e.p,{children:"Fluxor uses Flux/Redux approach. It helps you to manage your app\u2019s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to manage the state. But all of these benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a little overwhelming; but that depends upon the architecture decisions. If you are wondering if you need state management or not then you don't need it. When your app grows to the scale where managing app state becomes a hassle; and you start looking out for making it easy and simple. That is where you will find Fluxor helpful."}),(0,a.jsxs)(e.h2,{id:"creating-blazor-wasm-project",children:[(0,a.jsx)(e.a,{href:"#creating-blazor-wasm-project","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Creating Blazor Wasm project"]}),(0,a.jsx)(e.pre,{className:"language-bash",children:(0,a.jsx)(e.code,{className:"code-highlight language-bash",children:(0,a.jsxs)(e.span,{className:"code-line",children:["dotnet new blazorwasm ",(0,a.jsx)(e.span,{className:"token parameter variable",children:"-n"}),` FluxorWithBlazor `]})})}),(0,a.jsx)(e.p,{children:"This will create a blazor wasm app."}),(0,a.jsxs)(e.h2,{id:"install-fluxor-packages",children:[(0,a.jsx)(e.a,{href:"#install-fluxor-packages","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Install Fluxor Packages"]}),(0,a.jsx)(e.p,{children:"Install Nuget packages"}),(0,a.jsx)(e.pre,{className:"language-xml",children:(0,a.jsxs)(e.code,{className:"code-highlight language-xml",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"PackageReference"]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"Include"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"Fluxor",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"Version"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"5.4.0",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"PackageReference"]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"Include"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"Fluxor.Blazor.Web",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"Version"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"5.4.0",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"PackageReference"]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"Include"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"Fluxor.Blazor.Web.ReduxDevTools",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"Version"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"5.4.0",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]})]})}),(0,a.jsxs)(e.p,{children:["Update the ",(0,a.jsx)(e.code,{children:"Program.cs"})]}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"using"})," ",(0,a.jsx)(e.span,{className:"token namespace",children:"Fluxor"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:["builder",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),"Services",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token function",children:"AddFluxor"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),"o ",(0,a.jsx)(e.span,{className:"token operator",children:"=>"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" o",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token function",children:"ScanAssemblies"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token keyword",children:"typeof"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name type-expression",children:"Program"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),"Assembly",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" o",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token function",children:"UseReduxDevTools"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),"rdt ",(0,a.jsx)(e.span,{className:"token operator",children:"=>"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" rdt",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),"Name ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," ",(0,a.jsx)(e.span,{className:"token string",children:'"My application"'}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),(0,a.jsxs)(e.p,{children:["Update the ",(0,a.jsx)(e.code,{children:"App.razor"})]}),(0,a.jsx)(e.pre,{className:"language-xml",children:(0,a.jsx)(e.code,{className:"code-highlight language-xml",children:(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"Fluxor.Blazor.Web.StoreInitializer"]})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]})})}),(0,a.jsx)(e.p,{children:"Now we are ready to create state in our Blazor application."}),(0,a.jsxs)(e.h2,{id:"fluxor-rules",children:[(0,a.jsx)(e.a,{href:"#fluxor-rules","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Fluxor Rules"]}),(0,a.jsxs)(e.ul,{children:[(0,a.jsx)(e.li,{children:"State should always be read-only."}),(0,a.jsx)(e.li,{children:"To alter state our app should dispatch an action."}),(0,a.jsx)(e.li,{children:"Every reducer that processes the dispatched action type will create new state to reflect the old state combined with the changes expected for the action."}),(0,a.jsx)(e.li,{children:"The UI then uses the new state to render its display."})]}),(0,a.jsxs)(e.h2,{id:"core-concepts-state-actions-and-reducers",children:[(0,a.jsx)(e.a,{href:"#core-concepts-state-actions-and-reducers","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Core Concepts (State, Actions, and Reducers)"]}),(0,a.jsxs)(e.h3,{id:"state",children:[(0,a.jsx)(e.a,{href:"#state","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"State"]}),(0,a.jsx)(e.p,{children:"Imagine your app\u2019s state is described as a plain object. For example, the state of a counter app might look like this:"}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token attribute",children:(0,a.jsx)(e.span,{className:"token class-name",children:"FeatureState"})}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"CounterState"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token class-name return-type",children:(0,a.jsx)(e.span,{className:"token keyword",children:"int"})})," ClickCount ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"get"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token function",children:"CounterState"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:(0,a.jsx)(e.span,{className:"token keyword",children:"int"})})," clickCount",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ClickCount ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," clickCount",(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsx)(e.p,{children:"This object is like a \u201Cmodel\u201D except that there are no setters. This is so that different parts of the code can\u2019t change the state arbitrarily, causing hard-to-reproduce bugs. To change something in the state, you need to dispatch an action."}),(0,a.jsxs)(e.h3,{id:"action",children:[(0,a.jsx)(e.a,{href:"#action","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Action"]}),(0,a.jsx)(e.p,{children:"An action is a plain c# object (notice how we don\u2019t introduce any magic?) that describes what happened. Here are a few example actions:"}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"IncrementCounterAction"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsx)(e.p,{children:"Enforcing that every change is described as an action lets us have a clear understanding of what\u2019s going on in the app. If something changed, we know why it changed. Actions are like breadcrumbs of what has happened."}),(0,a.jsxs)(e.h3,{id:"reducers",children:[(0,a.jsx)(e.a,{href:"#reducers","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Reducers"]}),(0,a.jsx)(e.p,{children:"Finally, to tie state and actions together, we write a function called a reducer. Again, nothing magical about it\u2014it\u2019s just a function that takes state and action as arguments, and returns the next state of the app. It would be hard to write such a function for a big app, so we write smaller functions managing parts of the state:"}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"static"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"Reducers"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token attribute",children:(0,a.jsx)(e.span,{className:"token class-name",children:"ReducerMethod"})}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"static"})," ",(0,a.jsx)(e.span,{className:"token class-name return-type",children:"CounterState"})," ",(0,a.jsx)(e.span,{className:"token function",children:"ReduceIncrementCounterAction"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:"CounterState"})," state",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"IncrementCounterAction"})," action",(0,a.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(e.span,{className:"token operator",children:"=>"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"new"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation named-parameter",children:"clickCount"}),(0,a.jsx)(e.span,{className:"token punctuation",children:":"})," state",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),"ClickCount ",(0,a.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(e.span,{className:"token number",children:"1"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsxs)(e.h2,{id:"using-the-state",children:[(0,a.jsx)(e.a,{href:"#using-the-state","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Using the State"]}),(0,a.jsxs)(e.p,{children:["To use the state management we will update the ",(0,a.jsx)(e.code,{children:"counter"})," page which comes with the default app."]}),(0,a.jsx)(e.pre,{className:"language-html",children:(0,a.jsxs)(e.code,{className:"code-highlight language-html",children:[(0,a.jsx)(e.span,{className:"code-line",children:`@page "/counter" @using FluxorWithBlazor.State.Counter @inject IDispatcher dispatcher @inject `}),(0,a.jsxs)(e.span,{className:"code-line",children:["IState",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"CounterState"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` counterState `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"PageTitle"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Counter",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Counter",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"role"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"status",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Current count: @counterState.Value.ClickCount",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"btn btn-primary",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"@onclick"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"IncrementCount",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Click me",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsx)(e.span,{className:"code-line",children:` @code { private void IncrementCount() { dispatcher.Dispatch(new IncrementCounterAction()); } `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" }",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})}),` `]})]})}),(0,a.jsxs)(e.p,{children:["In the ",(0,a.jsx)(e.code,{children:"IncrementCount"})," method we are dispatching an action and the current count is displayed buy injecting the state."]}),(0,a.jsxs)(e.h2,{id:"effects",children:[(0,a.jsx)(e.a,{href:"#effects","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Effects"]}),(0,a.jsx)(e.p,{children:"Flux state is supposed to be immutable, and that state replaced only by pure functions, which should only take input from their parameters. With this in mind, we need something that will enable us to access other sources of data such as web services, and then reduce the results into our state. That is where the effects comes in. Effect handlers cannot (and should not) affect state directly. They are triggered when the action they are interested in is dispatched through the store, and as a response they can dispatch new actions."}),(0,a.jsxs)(e.h2,{id:"fetch-data-with-effects",children:[(0,a.jsx)(e.a,{href:"#fetch-data-with-effects","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Fetch data with effects"]}),(0,a.jsx)(e.p,{children:"We will update the fetch data sample provided in the default blazor application with Effects."}),(0,a.jsxs)(e.h3,{id:"fetch-data-action",children:[(0,a.jsx)(e.a,{href:"#fetch-data-action","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Fetch data action"]}),(0,a.jsx)(e.p,{children:"Lets create a action which will initiate the action. this will the be a empty action which will be used to trigger the effect."}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"FetchDataAction"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsxs)(e.h3,{id:"fetch-data-result-action",children:[(0,a.jsx)(e.a,{href:"#fetch-data-result-action","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Fetch data result action"]}),(0,a.jsx)(e.p,{children:"Once the data is received from the server we need a action to update the state. we will use the \xB4FetchDataResultAction\xB4 for that. It will have a the list of Weather forecast available."}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"FetchDataResultAction"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsxs)(e.span,{className:"token class-name return-type",children:["IEnumerable",(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherForecast",(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]})," Forecasts ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"get"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token function",children:"FetchDataResultAction"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(e.span,{className:"token class-name",children:["IEnumerable",(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherForecast",(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]})," forecasts",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" Forecasts ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," forecasts",(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsxs)(e.h2,{id:"weather-state",children:[(0,a.jsx)(e.a,{href:"#weather-state","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Weather state"]}),(0,a.jsx)(e.p,{children:"Weather state will the two property \xB4Forecasts\xB4 and \xB4IsLoading\xB4."}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token attribute",children:(0,a.jsx)(e.span,{className:"token class-name",children:"FeatureState"})}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"WeatherState"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token class-name return-type",children:(0,a.jsx)(e.span,{className:"token keyword",children:"bool"})})," IsLoading ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"get"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsxs)(e.span,{className:"token class-name return-type",children:["IEnumerable",(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherForecast",(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]})," Forecasts ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"get"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"private"})," ",(0,a.jsx)(e.span,{className:"token function",children:"WeatherState"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token function",children:"WeatherState"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:(0,a.jsx)(e.span,{className:"token keyword",children:"bool"})})," isLoading",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsxs)(e.span,{className:"token class-name",children:["IEnumerable",(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherForecast",(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]})," forecasts",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" IsLoading ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," isLoading",(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" Forecasts ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," forecasts ",(0,a.jsx)(e.span,{className:"token operator",children:"??"})," Array",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsxs)(e.span,{className:"token generic-method",children:[(0,a.jsx)(e.span,{className:"token function",children:"Empty"}),(0,a.jsxs)(e.span,{className:"token class-name generic",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherForecast",(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]})]}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsxs)(e.h2,{id:"weather-reducers",children:[(0,a.jsx)(e.a,{href:"#weather-reducers","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Weather Reducers"]}),(0,a.jsx)(e.p,{children:"In the reducer we need to manage 2 action which are created by us. One is to trigger the data fetch and the next one is to handle the data result."}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"static"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"Reducers"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token attribute",children:(0,a.jsx)(e.span,{className:"token class-name",children:"ReducerMethod"})}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"static"})," ",(0,a.jsx)(e.span,{className:"token class-name return-type",children:"WeatherState"})," ",(0,a.jsx)(e.span,{className:"token function",children:"ReduceFetchDataAction"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:"WeatherState"})," state",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"FetchDataAction"})," action",(0,a.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(e.span,{className:"token operator",children:"=>"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"new"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation named-parameter",children:"isLoading"}),(0,a.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,a.jsx)(e.span,{className:"token boolean",children:"true"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(e.span,{className:"token punctuation named-parameter",children:"forecasts"}),(0,a.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"null"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token attribute",children:(0,a.jsx)(e.span,{className:"token class-name",children:"ReducerMethod"})}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"static"})," ",(0,a.jsx)(e.span,{className:"token class-name return-type",children:"WeatherState"})," ",(0,a.jsx)(e.span,{className:"token function",children:"ReduceFetchDataResultAction"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:"WeatherState"})," state",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"FetchDataResultAction"})," action",(0,a.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(e.span,{className:"token operator",children:"=>"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"new"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation named-parameter",children:"isLoading"}),(0,a.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,a.jsx)(e.span,{className:"token boolean",children:"false"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(e.span,{className:"token punctuation named-parameter",children:"forecasts"}),(0,a.jsx)(e.span,{className:"token punctuation",children:":"})," action",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),"Forecasts",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsxs)(e.h2,{id:"weather-effects",children:[(0,a.jsx)(e.a,{href:"#weather-effects","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Weather effects"]}),(0,a.jsx)(e.p,{children:"Effects is where we will make our \xB4http\xB4 call. We will inject the \xB4HttpClient\xB4 and use that in the effect method. once the call is successful we will dispatch an action with the data result."}),(0,a.jsx)(e.pre,{className:"language-cs",children:(0,a.jsxs)(e.code,{className:"language-cs code-highlight",children:[(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"Effects"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"private"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"readonly"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"HttpClient"})," Http",(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token function",children:"Effects"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:"HttpClient"})," http",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" Http ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," http",(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token attribute",children:(0,a.jsx)(e.span,{className:"token class-name",children:"EffectMethod"})}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,a.jsx)(e.span,{className:"token class-name return-type",children:"Task"})," ",(0,a.jsx)(e.span,{className:"token function",children:"HandleFetchDataAction"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token class-name",children:"FetchDataAction"})," action",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"IDispatcher"})," dispatcher",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token class-name",children:(0,a.jsx)(e.span,{className:"token keyword",children:"var"})})," forecasts ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"await"})," Http",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsxs)(e.span,{className:"token generic-method",children:[(0,a.jsx)(e.span,{className:"token function",children:"GetFromJsonAsync"}),(0,a.jsxs)(e.span,{className:"token class-name generic",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherForecast",(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]})]}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token string",children:'"sample-data/weather.json"'}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token keyword",children:"if"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),"forecasts ",(0,a.jsx)(e.span,{className:"token keyword",children:"is"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"not"})," ",(0,a.jsx)(e.span,{className:"token keyword",children:"null"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" dispatcher",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token function",children:"Dispatch"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,a.jsx)(e.span,{className:"token class-name constructor-invocation",children:"FetchDataResultAction"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation named-parameter",children:"forecasts"}),(0,a.jsx)(e.span,{className:"token punctuation",children:":"})," forecasts",(0,a.jsx)(e.span,{className:"token operator",children:"!"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,a.jsxs)(e.h3,{id:"update-the-fetch-data-page",children:[(0,a.jsx)(e.a,{href:"#update-the-fetch-data-page","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Update the fetch data page"]}),(0,a.jsx)(e.p,{children:"We need to update the fetch data page to use the weather state."}),(0,a.jsx)(e.pre,{className:"language-html",children:(0,a.jsxs)(e.code,{className:"code-highlight language-html",children:[(0,a.jsxs)(e.span,{className:"code-line",children:['@page "/fetchdata" @inject IDispatcher dispatcher @inject IState',(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"WeatherState"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` weather @inherits Fluxor.Blazor.Web.Components.FluxorComponent `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"PageTitle"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Weather forecast",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Weather forecast",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"This component demonstrates fetching data from the server.",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` `}),(0,a.jsx)(e.span,{className:"code-line",children:` @if (weather.Value.IsLoading) { `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"em"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Loading...",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` } else { `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"table"]})," ",(0,a.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,a.jsxs)(e.span,{className:"token attr-value",children:[(0,a.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(e.span,{className:"token punctuation",children:'"'}),"table",(0,a.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"thead"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"th"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Date",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"th"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Temp. (C)",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"th"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Temp. (F)",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"th"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Summary",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"tbody"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` @foreach (var forecast in weather.Value.Forecasts) { `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"td"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"@forecast.Date.ToShortDateString()",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"td"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"@forecast.TemperatureC",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"td"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"@forecast.TemperatureF",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"<"}),"td"]}),(0,a.jsx)(e.span,{className:"token punctuation",children:">"})]}),"@forecast.Summary",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` } `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(e.span,{className:"code-line",children:[" ",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsx)(e.span,{className:"code-line",children:` } @code { protected override void OnInitialized() { base.OnInitialized(); dispatcher.Dispatch(new `}),(0,a.jsxs)(e.span,{className:"code-line",children:[" FetchDataAction()); } }",(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsxs)(e.span,{className:"token tag",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:""})}),` `]})]})}),(0,a.jsxs)(e.p,{children:["Repo : ",(0,a.jsx)(e.a,{href:"https://github.com/antosubash/blazor-state-management-with-fluxor",children:"https://github.com/antosubash/blazor-state-management-with-fluxor"})]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,Object.assign({},n,{children:(0,a.jsx)(d,n)})):d(n)}var F=x;function p(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(I);})(); ;return Component;

Menu

Tags:

Related Posts

Add tailwindcss to your ABP Blazor UI