Global & Local State with MobX React Example

[codeBelt]

Check out my MobX React example!

I will be writing an article on the follow code example, but I wanted to share to see if I get any feedback with improvements first.

Global & Local State with MobX React Example

A factory function approach to MobX stores with React & Next.js

View the demo site

Checkout the repo

Quick Overview

GlobalStores

• AuthGlobalStore:
  • Factory function store that uses observable
  • A fake auth store to keep track of a user loaded from randomuser.me
• ToastGlobalStore:
  • Factory function store that uses observable
  • A store that uses notistack to create a notification (toast) system

Local Stores

• IndexPageStore:
  • Factory function store that uses observable
  • Makes two requests in the browser to api.tvmaze.com
  • Shows a loading indicator and allows the user to sort actors
• EpisodesPageStore:
  • Factory function store that uses observable
  • Hydrated with data that was fetched server-side
  • Allows the user to sort the data on the page that was previously rendered server-side
  • Shows how use the GlobalStores (getGlobalStore()) within local stores
• AboutPageStore:
  • ES6 Class store that uses makeAutoObservable for comparison
  • A simple store that makes a request to httpstat.us
  • Shows how to handle api errors in the local store and on the page
  • Shows how use the GlobalStores (getGlobalStore()) within local stores

If you want to see an overview of the files using Mobx check out this PR Diff.

If you want to check out the example with stores using all ES6 Classes here is the branch. (PR Diff)

Feedback Welcomed

If you want to give me feedback on how to improve my usage with MobX, TypeScript types, or Next.js. Create an issue on my repo.

You could also fork my repo and create a PR to show me how you would improve something.

Help Wanted

• Validate I am following best practice with Mobx and factory functions.
• Help me understand how to remove runInAction from ToastGlobalStore and validate I set up ToastNotifier correctly.

[kubk]

Looks solid! Why don't you want to use makeAutoObservable or makeObservable? It's a recommended way: https://mobx.js.org/observable-state.html

Example:

[codeBelt]

@kubk I really appreciate the feedback.

The main reason I went with observable was because of this comment #2536 (reply in thread) on a thread I started.

I just tried replacing observable with makeAutoObservable locally and it works the same. Also I've noticed that it removed all but one of my [mobx] warnings which is very nice.

I will probably change observable to makeAutoObservable unless someone else has feedback?

[urugator]

Objects returned from observable are proxied and therefore supports delete store.prop, store.notYetExistingProp = 5, prop in store, Object.keys/entries/values etc. If you go for simplicity and robustness I suggest observable.

[codeBelt]

Thanks @urugator.

What about Classes that use makeObservable or makeAutoObservable. Are they proxied and have support for prop in store, Object.keys/entries/values etc. or should Classes be setup a different way?

class Doubler {
    value

    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action
        })
        this.value = value
    }

    get double() {
        return this.value * 2
    }

    increment() {
        this.value++
    }
}

code example source

[urugator]

No, classes aren't proxied.
delete store.key or store.notYetExistingProp = 5 won't work correctly.
in,Object., etc will yield correct results, but aren't reactive - won't create subscription in reactive context (observer/reaction/autorun).
As a workaround mobx exposes own object api - set/get/has/keys/values/entries, which is compatible with both proxied/non-proxied objects.
If an object has a fixed shape, you shouldn't need these.