Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
codeBelt committed Feb 26, 2021
1 parent 22b959d commit ad45800
Showing 1 changed file with 6 additions and 9 deletions.
15 changes: 6 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ I will be writing an article on the follow code example, but I wanted to share t

## Global & Local State with MobX React Example

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

[View the demo site](https://mobx-local-global-stores.vercel.app/)

Expand All @@ -15,33 +15,31 @@ I will be writing an article on the follow code example, but I wanted to share t
#### [GlobalStores](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/GlobalStore.ts)

- **[AuthGlobalStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/auth/AuthGlobalStore.ts)**:
- Factory function store that uses `observable`
- ES6 Class store that uses `makeAutoObservable`
- A fake auth store to keep track of a user loaded from [randomuser.me](https://randomuser.me/)
- **[ToastGlobalStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/toast/ToastGlobalStore.ts)**:
- Factory function store that uses `observable`
- ES6 Class store that uses `makeAutoObservable`
- A store that uses [notistack](https://iamhosseindhv.com/notistack) to create a notification (toast) system

#### Local Stores

- **[IndexPageStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/pages/index-page/IndexPage.store.ts)**:
- Factory function store that uses `observable`
- ES6 Class store that uses `makeAutoObservable`
- Makes two requests in the browser to [api.tvmaze.com](https://api.tvmaze.com)
- Shows a loading indicator and allows the user to sort actors
- **[EpisodesPageStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/pages/episodes-page/EpisodesPage.store.ts)**:
- Factory function store that uses `observable`
- 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](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/GlobalStore.ts) ([getGlobalStore()](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/shared/global-store-provider/GlobalStoreProvider.tsx#L13)) within local stores
- **[AboutPageStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/pages/about-page/AboutPage.store.ts)**:
- ES6 Class store that uses `makeAutoObservable` for comparison
- Factory function store that uses `observable` for comparison
- A simple store that makes a request to [httpstat.us](https://httpstat.us)
- Shows how to handle api errors in the local store and on the page
- Shows how use the [GlobalStores](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/GlobalStore.ts) ([getGlobalStore()](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/shared/global-store-provider/GlobalStoreProvider.tsx#L13)) within local stores

If you want to see an overview of the files using Mobx check out this [PR Diff](https://github.com/codeBelt/mobx-local-global-stores/pull/4/files).

If you want to check out the example with stores using all ES6 Classes [here is the branch](https://github.com/codeBelt/mobx-local-global-stores/tree/es6-classes). ([PR Diff](https://github.com/codeBelt/mobx-local-global-stores/pull/5/files))

### 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](https://github.com/codeBelt/mobx-local-global-stores).
Expand All @@ -50,5 +48,4 @@ You could also fork my repo and create a PR to show me how you would improve som

### Help Wanted

- Validate I am following best practice with Mobx and factory functions.
- Help me understand how to remove `runInAction` from [ToastGlobalStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/toast/ToastGlobalStore.ts) and validate I set up [ToastNotifier](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/ui/toast-notifier/ToastNotifier.tsx) correctly.

1 comment on commit ad45800

@vercel
Copy link

@vercel vercel bot commented on ad45800 Feb 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.