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.