Global state in C#Bot

In React, state is typically stored in a parent component and passed down as props to other components which depend on this state. However, there are cases where we want access to a global state; to reduce complexity, this global store should be limited. To keep our components clean, C#Bot primarily uses the user, user group, and whether they are in the front or back-end of the application. Every C#Bot application uses store.tsx, a class which uses MobX for state management across the application by instantiating this store and passing it to one of the top level components of the application in App.tsx.

If you inspect store.tsx you will notice it will store the user globally and other important information used across the application. It will also make use of the @computed decorator for MobX ‘getter’ methods. This computed property is for getting values from existing state or other computed values and is optimised for performance. An example of this is provided below:

@observable
private user?: IUserResult;

...

@computed
public get userId(): string | undefined {
    // % protected region % [Customise the userId getter here] off begin
    return this.user ? this.user.id : undefined;
    // % protected region % [Customise the userId getter here] end
};

To use this in our previous component you will need to

1. Import the store

    import { store } from 'Models/Store';
   

2. Then we can call it in our render component:

    <p>User Id: {store.userId}</p>
   

3. Your component should now look something like this: