mobx持久化

config-overrides.js

@@ -0,0 +1,17 @@
+// import { override, fixBabelImports }  from 'customize-cra'
+const { override, fixBabelImports, addLessLoader,disableEsLint, addDecoratorsLegacy,useBabelRc } = require('customize-cra');
+
+module.exports = override(
+    addDecoratorsLegacy(),
+    disableEsLint(),
+    useBabelRc(),
+    fixBabelImports('import', {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true
+    }),
+    addLessLoader({
+        javascriptEnabled: true,
+        modifyVars: { '@primary-color': '#1DA57A' },
+    })
+);

package.json

@@ -3,14 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "antd": "^3.22.1",
+    "babel-plugin-import": "^1.12.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-preset-mobx": "^2.0.0",
+    "customize-cra": "^0.5.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "mobx": "^5.11.0",
+    "mobx-persist": "^0.4.1",
+    "mobx-react": "^6.1.3",
     "react": "^16.8.6",
+    "react-app-rewire-mobx": "^1.0.9",
+    "react-app-rewired": "^2.1.3",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-loadable": "^5.5.0",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "3.0.1",
+    "serializr": "^1.5.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.css

@@ -1,33 +1,6 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@import '~antd/dist/antd.css';
+.flex_center{
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+}

src/App.js

@@ -1,26 +1,14 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
 
-export default App;
+import React from 'react';
+import RootRouter from './route'
+import store from './store'
+import { Provider } from 'mobx-react'
+import './App.css'
+export default function App (props) {
+    return (
+        <Provider { ...store }>
+            <RootRouter/>
+        </Provider>
+    );
+  
+}

src/components/Counter/index.css

@@ -0,0 +1,4 @@
+.counterSpan{
+    padding: 15px;
+    display: inline-block;
+}

src/components/Counter/index.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Button } from 'antd';
+import { inject, observer } from 'mobx-react'
+import './index.css'
+
+@inject('counterStore')
+@observer
+export default class MobxPersist extends Component {
+  componentDidMount () {
+    console.log('MobxPersist', this.props)
+  }
+  increaseNum = () => {
+    this.props.counterStore.increaseNum();
+  }
+  decrease = () => {
+    this.props.counterStore.decrease();
+  }
+  render () {
+    const { counterStore } = this.props
+    console.log('this.props.counterStore.getPow', this.props.counterStore.getPow)
+    return (
+      <div className='flex_center countValueWrap'>
+        <Button type="primary" onClick={this.increaseNum}>加</Button>
+        <div className='counterSpan'>{counterStore.count}</div>
+        <Button type="primary" onClick={this.decrease}>减</Button>
+        <div>Math.pow = {this.props.counterStore.getPow}</div>
+      </div>
+    );
+  }
+}

src/components/Counter/store.js

@@ -0,0 +1,24 @@
+import { action, computed, observable } from 'mobx'
+import { persist } from 'mobx-persist'
+import { serializable, list, object } from 'serializr'
+
+class CounterStore {
+    @persist @observable count = 0;
+    
+    @computed
+    get getPow() {
+        return this.count * this.count
+    } 
+
+    @action
+    increaseNum () {
+        this.count = ++this.count
+    }
+
+    @action
+    decrease () {
+        this.count = --this.count
+    }
+}
+const counterStore = new CounterStore
+export default counterStore

src/route/history.js

@@ -0,0 +1,3 @@
+import createHistory from 'history/createHashHistory'
+
+export default createHistory()

src/route/index.js

@@ -0,0 +1,24 @@
+
+
+import React from 'react';
+import { Switch, Route, Router, Redirect  } from 'react-router-dom'
+import routeTree from './router'
+import history from './history'
+export default function RootRouter (props) {
+    return (
+        <Router history={history}>
+            <Switch>
+                { 
+                    routeTree.map(({ path, name, component})=> {
+                        return (
+                            <Route key={name} exact path={path} component={component} />
+                        )
+                    })
+                }
+                <Route path="/404" component={() => { return <h1>404</h1>}}/>
+                <Redirect to='/404' />
+            </Switch>
+        </Router>
+    );
+  
+}

src/route/router.js

@@ -0,0 +1,13 @@
+
+import { loadable } from '../utils'
+export default [
+    {
+        path: '/',
+        name: 'Home',
+        component:  loadable(import('../views/Home'))
+    }, {
+        path: '/mobxPersiste',
+        name: 'mobx持久化测试',
+        component:  loadable(import('../views/MobxPersiste'))
+    }
+]

src/store/index.js

@@ -0,0 +1,14 @@
+import nav from './nav'
+import counterStore from '../components/Counter/store'
+import { create } from 'mobx-persist'
+const hydrate = create({
+    storage: localStorage,
+    jsonify: true
+})
+hydrate('_Shop', counterStore).then(() => console.log('someStore has been hydrated'))
+hydrate('nav', nav).then(() => console.log('someStore has been hydrated'))
+
+export default {
+    counterStore,
+    nav,
+}

src/store/nav.js

@@ -0,0 +1,13 @@
+import { action, computed, observable } from 'mobx'
+import history from '../route/history'
+const { push, go, goBack, goForward, replace } = history
+class NavStore {
+
+    @action
+    push ({ pathname = '/', query = {} }) {
+        console.log('pathname',pathname)
+        push({ pathname, query })
+    }
+}
+const navStore = new NavStore
+export default navStore

src/utils/index.js

@@ -0,0 +1,6 @@
+
+export { default as loadable } from './loadable'
+
+export const modalConsole = (modelName, error) => {
+    console.log(`%cThe error in ${modelName}.js`,'color:red', error)          
+}

src/utils/loadable.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Loadable from 'react-loadable' 
+const loadingComponent =()=>{
+    return <div>你瞅啥...</div>
+}
+export default function loadable(loader, loading = loadingComponent) {
+    if (!loader) throw new Error('??excuse me??!');
+    return Loadable({
+        loader: () => loader,
+        loading,
+    })   
+}
+

src/views/Home/index.css

@@ -0,0 +1,13 @@
+.navWrap{
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 10px;
+}
+.testItemWrap{
+    background: purple;
+    color: #fff;
+    display: inline-block;
+    padding: 4px 8px 4px 8px;
+    border-radius: 6px;
+}

src/views/Home/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { Button } from 'antd'
+import { inject, observer } from 'mobx-react'
+import './index.css'
+
+const nav = [{
+  name: 'mobx持久化测试',
+  route: '/mobxPersiste'
+}]
+@inject('nav')
+@observer
+export default class Home extends Component {
+  handleGotoPage =(route) => {
+    this.props.nav.push({ pathname: route })
+  }
+  render () {
+    return (
+      <div className='navWrap'>
+        {
+          nav.map((item, index) => {
+            return (
+              <Button type='primary' key={index} onClick={() => { this.handleGotoPage(item.route) }}>
+                {item.name}
+              </Button>
+            )
+          })
+        }
+      </div>
+    )
+  }
+}

src/views/MobxPersiste/index.js

@@ -0,0 +1,7 @@
+import React, { Component } from 'react';
+import Counter from '../../components/Counter'
+export default class MobxPersist extends Component {
+    render () {
+        return <Counter/>
+    }
+}