Model named state transitions

Represent the counter change as one named Flux transition.

Table of contents

APIs used

mount: Starts a Valyrian.js application on a DOM target.
FluxStore: Provides named mutations, asynchronous actions, computed getters, modules and plugins over Flux state.

Run this recipe

Starting project: Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File: Replace src/client-entry.tsx with this recipe snippet.
Run: Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result: The named transition changes the rendered count from 0 to 2.

Starting point

Start with count 0 and define increment as the only mutation in this example.

Steps

Use commit for the named increment mutation with an amount of 2 and render the resulting state.

ts

import { mount } from &quot;valyrian.js&quot;;
import { FluxStore } from &quot;valyrian.js/flux-store&quot;;

const store = new FluxStore({
  state: { count: 0 },
  mutations: {
    increment(state, amount = 1) {
      state.count += amount;
    },
  },
});

store.commit(&quot;increment&quot;, 2);

mount(&quot;body&quot;, () =&gt; `Count: ${store.state.count}`);

Result

The named transition changes the rendered count from 0 to 2.

Continue