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

MobX stores with React & Next.js

View the demo site

Checkout the repo

Quick Overview

GlobalStores

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

Local Stores

• IndexPageStore:
  • ES6 Class store that uses makeAutoObservable
  • Makes two requests in the browser to api.tvmaze.com
  • Shows a loading indicator and allows the user to sort actors
• EpisodesPageStore:
  • ES6 Class store that uses makeAutoObservable
  • 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:
  • Factory function store that uses observable 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.

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

• Help me understand how to remove runInAction from ToastGlobalStore and validate I set up ToastNotifier correctly.