add mobx

Author: riskers

.gitignore

@@ -1,4 +1,3 @@
-
 .vscode
 dist
 node_modules

4_mobx/README.md

@@ -1,2 +1,5 @@
-[MobX](https://github.com/mobxjs/mobx)
+[MobX][1]
 
+[1]: https://github.com/mobxjs/mobx
+
+a simple MobX [demo](https://react-sbgkk6.stackblitz.io)

4_mobx/src/app.js

@@ -1,15 +1,47 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-import configureStore from './store'
 
 import App from 'containers/App'
 
-const store = configureStore()
+import { observable } from 'mobx'
+import { Provider, observer, inject } from 'mobx-react'
+
+import stores from './store'
+
+@inject('clickTimes')
+@observer
+class Counter extends React.Component {
+
+  constructor(props) {
+    super(props)
+  }
+
+	onInc = () => {
+    this.props.clickTimes.inc()
+	}
+
+	onDec = () => {
+    this.props.clickTimes.dec()
+	}
+
+	render() {
+		return <div>
+			<p>Count: {this.props.clickTimes.times}</p>
+			<button onClick={this.onInc}> + </button>
+			<button onClick={this.onDec}> - </button>
+		</div>
+	}
+}
 
 ReactDOM.render(
-  <Provider store={store}>
-    <App/>
+  <Provider {...stores}>
+	  <Counter />
   </Provider>,
-  document.getElementById('app')
-)
+	document.getElementById('app')
+)
+
+// ReactDOM.render(
+//     <App/>
+//   ,
+//   document.getElementById('app')
+// )

4_mobx/src/containers/App/constants.js

@@ -1,26 +1,16 @@
 import React from 'react'
-import { connect } from 'react-redux'
 import Loading from 'components/Loading'
 import List from 'components/List'
 
 import './style.css'
 
-import {
-  searchUsers,
-  getFollowers,
-  getFollowings
-} from './actions'
+// import {
+//   searchUsers,
+//   getFollowers,
+//   getFollowings
+// } from './actions'
 
 export default
-@connect(
-  state => (
-    {
-      users: state.usersReducer,
-      followers: state.followersReducer,
-      followings: state.followingsReducer
-    }
-  )
-)
 class App extends React.Component {
   constructor(props) {
     super(props)

4_mobx/src/containers/App/index.jsx

@@ -0,0 +1,15 @@
+import { observable, action } from 'mobx'
+
+class clickTimesStore {
+  @observable times = 0;
+  @action inc = () => {
+    this.times++
+  }
+  @action dec = () => {
+    this.times--
+  }
+}
+
+const clickTimes = new clickTimesStore
+
+export default clickTimes

4_mobx/src/containers/App/reducers.js

@@ -1,23 +1,31 @@
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
-import thunk from 'redux-thunk'
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-import {
-  usersReducer,
-  followersReducer,
-  followingsReducer
-} from 'containers/App/reducers'
+import clickTimes from './clickTimesStore'
 
-const reducer = combineReducers({
-  usersReducer,
-  followersReducer,
-  followingsReducer
-})
+const stores = {
+  clickTimes
+}
 
-const configureStore = () => createStore(
-  reducer,
-  composeEnhancers(
-    applyMiddleware(thunk)
-  )
-)
+export default stores
 
-export default configureStore
+// import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
+// import thunk from 'redux-thunk'
+// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+// import {
+//   usersReducer,
+//   followersReducer,
+//   followingsReducer
+// } from 'containers/App/reducers'
+
+// const reducer = combineReducers({
+//   usersReducer,
+//   followersReducer,
+//   followingsReducer
+// })
+
+// const configureStore = () => createStore(
+//   reducer,
+//   composeEnhancers(
+//     applyMiddleware(thunk)
+//   )
+// )
+
+// export default configureStore