react-mobx | Frontend Utils library

I used Map instead of Set but if you want to replace Map with Set, it works perfectly as well.

I used Map with a .has() to check if the item name stored is unique so it acts like a Set.

Stackblitz can be found → https://stackblitz.com/edit/react-mobx-grocery-shopping?file=index.tsx

Inside your App component, you created an object variable store via this code const store = AppStore();. Then you use it, display it, change it and so on. Later on inside your SomeComponent component you create a NEW variable store via const store = AppStore();. Even tho the variable names are the same and using the object, these are 2 DIFFERENT variables. Hence why updating one does not update the other. Inside the DOM they are a different object. To fix it instead of creating a new object inside the SomeComponent just pass store from the parent component. Inside the App, when rendering SomeComponent pass it the store variable like so

From the makers of the mobx-react-devtools team

Note: This package is deprecated. Use the browser plugin instead. Also note that with mobx-react@6 and higher the package should no longer be needed, see changelog

incCount and decCount are made into actions automatically in your example.

The source object you give as argument to observable will be cloned and have all its members made observable. Any geters will be annotated with computed, and any member that contains a function value will be annotated with autoAction (i.e. made into an action).

Example

The function rpotectedRoute return different types between wether you are login.

1. When authStore.loggedIn is true, it returns a React Component, it's something like (props) =>
2. when auth.loggedIn is false, it returns a React Element, it's something like

So in this case you should do