How to extend state in SPA?

[jkleiser]

I have just created the basic SPA by doing npx apprun --init --spa. Now I want the app's state to take care of more than just the component name (Home, About, Contact). I may e.g. want to have a counter (+1/-1) on one of the components. In the basic SPA one gets the impression that the component name is the app's state (state = 'Home';), but right now it seems that it's not necessarily so. I'm a bit confused.

[jkleiser]

I now see that the way to extend the state, is e.g. like this:

state = { page: 'About', count: 0 };

and add buttons like this in the view function:

<button type="button" onclick={() => this.run("+1")}>+1</button>

and event handlers like this in the update object:

'+1': state => {
  return { ...state, count: state.count + 1 };
}

What confused me initially, was the meaning and function of the original state = 'About'. It looked as if it was modifying a global state, while it is only initialising the AboutComponent's state. I'm still not sure why it we don't have to refer to this state with this.state.

[jkleiser]

And as explained here https://medium.com/@yiyisun/announcing-apprun-directives-6a063f88379c, the button can be simplified like this:

<button type="button" $onclick="+1">+1</button>

[yysun]

While I was typing the answer for you, you have figured it out to make the state an object that contains the page title and the counter. :) In terms of using this.state, the component ( https://apprun.js.org/docs/#/05-component) gives a local scope for state. Each component can have their own state. $onclick passes the component’s state into the event handle, so that you don’t need to use this.state. If you want to use global state, you can create and export a global state from a module.

…

On Wed, Nov 27, 2019 at 11:59 AM Jon Kleiser ***@***.***> wrote: And as explained here ***@***.***/announcing-apprun-directives-6a063f88379c, the button can be simplified like this: <button type="button" $onclick="+1">+1</button> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#81?email_source=notifications&email_token=AABJUM4XNX6JE7JPI32UOLLQV2RONA5CNFSM4JR2FTC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFKESWY#issuecomment-559171931>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABJUM7EB72LM4OE3BCG7ELQV2RONANCNFSM4JR2FTCQ> .

[jkleiser]

Thanks for your answer. I obviously should have studied your docs on components better. In that section (05-component#class-fields), however, I have problem understanding that the events generated by use of app.run in the button onclick will be picked up by the +1/-1 event handlers in that same Counter example. In my AboutComponent, which has pretty much the same structure as that Counter, I had to use this.run (or the $onclick style) for the events to be picked up.

[yysun]

app.run fires the global events that can be picked up by all components. this.run fires local events that can only be picked up inside the component. The component also gives a local scope for events when registering the events inside the component. ```javascript class Counter extends Component { update = { '+1': state=>state+1, // local event } } ``` If you have one counter in the AboutComponent, and another counter in the ContactComponent. Their events +1/-1 are encapsulated and won't impact each other. $onclick is the syntax-sugar and does the same thing as this.run.

…

On Wed, Nov 27, 2019 at 3:26 PM Jon Kleiser ***@***.***> wrote: Thanks for your answer. I obviously should have studied your docs on components better. In that section (05-component#class-fields), however, I have problem understanding that the events generated by use of app.run in the button onclick will be picked up by the +1/-1 event handlers in that same Counter example. In my AboutComponent, which has pretty much the same structure as that Counter, I had to use this.run (or the $onclick style) for the events to be picked up. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#81?email_source=notifications&email_token=AABJUM2O7LHDWAVJITX2ODLQV3JYNA5CNFSM4JR2FTC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFKVHCA#issuecomment-559240072>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABJUM5WOU5XVMBLUR3K4E3QV3JYNANCNFSM4JR2FTCQ> .

[jkleiser]

If I change this.run("+1") to app.run("+1") in the onclick of the +1 button in my AboutComponent, I get "app.ts:33 Assertion failed: No subscriber for event: +1" when I click that button. I conclude that app.run requires a global event handler.

[yysun]

You’re right. By default, component events are local. You can prefix the event name with #, / or @ to make it global.

class Counter extends Component {
   update = {
      '+1': state=>state+1, // local event
      '#+1': state=>state+1, // global event
   }
}

[jkleiser]

Can you explain the reason for having <span class="sr-only">(current)</span> in the Home nav-link element in the main.tsx file?

[yysun]

It is from the Bootstrap template. Not needed or related to any AppRun features.

…

On Fri, Nov 29, 2019 at 10:04 AM Jon Kleiser ***@***.***> wrote: Can you explain the reason for having <span class="sr-only">(current)</span> in the Home nav-link element in the main.tsx file? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#81?email_source=notifications&email_token=AABJUM3B2ZCXZ7XR3FBKVTTQWEVRHA5CNFSM4JR2FTC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFPCEWY#issuecomment-559817307>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABJUM456NUVUFFYQC23GRLQWEVRHANCNFSM4JR2FTCQ> .

[jkleiser]

I need to fetch some global state when my SPA starts. I guess this global state could be initialised in main.tsx, probably in the app.on handler. I need this global state to be accessible from the individual components of my SPA. Would I need to pass this global state to the app.render call in main.tsx? This is typical when using app.start. Where can I find descriptions of the app.render and app.start calls?

[jkleiser]

Initialising global state in the app.on handler in main.tsx now doesn't look like a good idea, as that handler is being called every time one switch view from one component to another. Would it be a better idea to have "global data" in one component, and then let other components have read access to that data? I could give it a try.
I have tried to put 'mounted' functions, like the one below, into a couple of the components of my SPA, but for some reason they don't seems to get called. What may be the reason for that?

  mounted = (props: any, children: any[], state) => {
    console.log("MyComp.mounted");
    return state;
  }

[yysun]

I would suggest creating a module, e.g. global.ts

export let global_state = {
 name: 'xxx'
}

And import it in main.tsx and other components

import { global_state } from './global';

You can also export a function for updating the global state in global.ts

export let global_state = {
  name: 'xxx'
}
export const set_global_state = state => {
  global_state = state;
}

To call the function, import it:

import { set_global_state } from './global';
set_global_state({ ... })

If you want to notify other components, send a global event in the set_global_state function:

import app from "apprun";
export let global_state = {
  name: 'xxx'
}
export const set_global_state = state => {
  global_state = state;
  app.run('@state_updated', state);
}

Other components can subscribe to the events and merge the global state into the local state:

import { app, Component } from "apprun";
class MyComponent extends Component {
  state = {}
  view = state => <div>{state}</div>
  update = {
    '@state_updated': (state, global_state) => {
      return { ...state, global_state}
    }
  }
}

[yysun]

It is unclear in the documentation that the mounted lifecycle function is only called in the statefull child component.

class Child extends Component {
  state = {} // you can define the initial state
  view = state => <div></div>
  update = {}
  mounted = (props, children) => { ...state, ...props } // this will be called, you can merge props into the state
}

class Parent extends Component {
  state = {} // you can define the initial state
  view = state => <div>
    <Child />
  </div>
  update = {}
  mounted = () => { } // this will NOT be called when component is created using the constructor
}
new Parent().start(document.body); 

However, you can pass the initial state in to the component's constructor directly:

const init_state = {};
new Parent(init_state).start(document.body); 

[jkleiser]

Thanks a lot for the module suggestion. It looks very promising.