var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},t=(a,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of N(e))!k.call(a,c)&&c!==s&&l(a,c,{get:()=>e[c],enumerable:!(o=h(e,c))||o.enumerable});return a};var b=(a,e,s)=>(s=a!=null?m(u(a)):{},t(e||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>t(l({},"__esModule",{value:!0}),a);var i=y((S,r)=>{r.exports=_jsx_runtime});var x={};g(x,{default:()=>d,frontmatter:()=>f});var n=b(i()),f={title:"Start Mobx With React",date:"2023-04-21",tags:["Mobx","React","State Management"],draft:!1,summary:"Two hooks to start Mobx with React"};function p(a){let e={a:"a",code:"code",p:"p",pre:"pre",span:"span",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["Maybe two years ago, My friend Bryan suggest me to replace ",(0,n.jsx)(e.a,{href:"https://redux.js.org/",children:"redux"})," to ",(0,n.jsx)(e.a,{href:"https://mobx.js.org/",children:"mobx"}),". I remember when I opened the document of mobx, I was confused by the document, and I didn't know how to start. So I gave up."]}),(0,n.jsxs)(e.p,{children:["Luckily, I find an easy-to-follow tutorial today, ",(0,n.jsx)(e.a,{href:"https://www.youtube.com/watch?v=pnhIJA64ByY",children:"Introduction to MobX & React in 2020"}),"."]}),(0,n.jsx)(e.p,{children:"So, Let's start!"}),(0,n.jsxs)(e.p,{children:["First of all, you can create an react app by using ",(0,n.jsx)(e.a,{href:"https://create-react-app.dev/",children:"create-react-app"}),", then in order to support ",(0,n.jsx)(e.code,{children:"decorators"}),", you need to eject the app."]}),(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsx)(e.code,{className:"code-highlight language-bash",children:(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"})," run ",(0,n.jsx)(e.span,{className:"token function",children:"eject"}),` `]})})}),(0,n.jsxs)(e.p,{children:["and change the ",(0,n.jsx)(e.code,{children:"package.json"})," to support ",(0,n.jsx)(e.code,{children:"@babel/plugin-proposal-decorators"}),"."]}),(0,n.jsx)(e.pre,{className:"language-json",children:(0,n.jsxs)(e.code,{className:"code-highlight language-json",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ..."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"babel"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"presets"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"react-app"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"plugins"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"@babel/plugin-proposal-decorators"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"legacy"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,n.jsxs)(e.p,{children:["Then, you can install ",(0,n.jsx)(e.code,{children:"mobx"})," and ",(0,n.jsx)(e.code,{children:"mobx-react"}),"."]}),(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsx)(e.code,{className:"code-highlight language-bash",children:(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"})," ",(0,n.jsx)(e.span,{className:"token function",children:"install"}),` mobx mobx-react `]})})}),(0,n.jsx)(e.p,{children:"Here comes the point!"}),(0,n.jsxs)(e.p,{children:["Just like redux, you need create a store to manage the state. In mobx, you can use ",(0,n.jsx)(e.code,{children:"useLocalStore"})," to create a store.It includes data, action and computed method."]}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"code-highlight language-js",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// src/store/index.js"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useLocalStore ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'mobx-react'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"createContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreProvider"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," children ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," store ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useLocalStore"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// data"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property literal-property",children:"bugs"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:"'Centipede'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// action: don't use `this`"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function function-variable",children:"addBug"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"bug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" store",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"bugs"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"push"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"bug",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// computed: don't use `this`"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"get"})," ",(0,n.jsx)(e.span,{className:"token function",children:"bugsCount"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," store",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"bugs"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"length"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Provider"})})," value",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"store",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"children",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Provider"})}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsxs)(e.span,{className:"token exports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreProvider"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})]})}),(0,n.jsxs)(e.p,{children:["Then, you can wrap ",(0,n.jsx)(e.code,{children:""})," in ",(0,n.jsx)(e.code,{children:""}),", then ",(0,n.jsx)(e.code,{children:""})," can access the store."]}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"code-highlight language-js",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// src/index.js"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ReactDOM"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-dom/client'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'./index.css'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'./App'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"reportWebVitals"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'./reportWebVitals'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreProvider"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'./store'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," root ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ReactDOM"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"createRoot"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token dom variable",children:"document"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"getElementById"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'root'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["root",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StrictMode"})}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreProvider"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreProvider"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StrictMode"})}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// If you want to start measuring performance in your app, pass a function"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// to log results (for example: reportWebVitals(console.log))"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"reportWebVitals"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),(0,n.jsxs)(e.p,{children:["In order to get store in ",(0,n.jsx)(e.code,{children:""}),", you can use ",(0,n.jsx)(e.code,{children:"React.useContext"})," to get the store. If you want to make your component re-render when the store changes, you can use ",(0,n.jsx)(e.code,{children:"useObserver"}),"."]}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"code-highlight language-js",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// src/App.js"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'./store'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useObserver ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'mobx-react'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BugsHeader"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," store ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"useContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token function",children:"useObserver"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"h1",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"store",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"bugsCount"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bugs"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"h1",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BugsList"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," store ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"useContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// It will re-render when the store changes"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token function",children:"useObserver"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"ul",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"store",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"bugs"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"bug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"li key",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"bug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"bug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"li",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"ul",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BugsForm"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," store ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"useContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StoreContext"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"bug",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setBug",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// It doesn't re-render when the store changes"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),`form `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" onSubmit",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"e"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" store",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"addBug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"bug",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setBug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"preventDefault"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),`input `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"text"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" value",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"bug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" onChange",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"e"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setBug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"target"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"value"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"button type",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"submit"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"button",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"form",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BugsHeader"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BugsList"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BugsForm"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"}),` `]})]})}),(0,n.jsxs)(e.p,{children:["So, just two hooks ",(0,n.jsx)(e.code,{children:"useLocalStore"}),", ",(0,n.jsx)(e.code,{children:"useObserver"})," you need to know to start mobx with react. In real project, you may want to have multiple stores for different components."]}),(0,n.jsx)(e.p,{children:"Have a try!"})]})}function d(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(p,{...a})}):p(a)}return w(x);})(); ;return Component;