convert to mobx

Author: rwieruch

package-lock.json

@@ -3,13 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "mobx": "^3.2.2",
+    "mobx-react": "^4.2.2",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-redux": "^5.0.5",
-    "react-scripts": "1.0.10",
-    "redux": "^3.7.2",
-    "redux-logger": "^3.0.6",
-    "redux-saga": "^0.15.6"
+    "react-scripts": "1.0.10"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { doFetchStories } from '../actions/story';
+import { inject, observer } from 'mobx-react';
 import Button from './Button';
+import { fetchStories } from '../api/story';
 
 const applyQueryState = query => () => ({
   query
 });
 
+@inject('storyStore') @observer
 class SearchStories extends Component {
   constructor(props) {
     super(props);
@@ -22,7 +23,8 @@ class SearchStories extends Component {
   onSubmit(event) {
     const { query } = this.state;
     if (query) {
-      this.props.onFetchStories(query)
+      fetchStories(query)
+        .then(result => this.props.storyStore.setStories(result.hits));
 
       this.setState(applyQueryState(''));
     }
@@ -51,11 +53,4 @@ class SearchStories extends Component {
   }
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  onFetchStories: query => dispatch(doFetchStories(query)),
-});
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(SearchStories);
+export default SearchStories;

src/actions/archive.js

@@ -1,9 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import {
-  getReadableStories,
-  getFetchError,
-} from '../selectors/story';
 import './Stories.css';
 
 import Story from './Story';
@@ -57,11 +52,4 @@ const StoriesHeader = ({ columns }) =>
     )}
   </div>
 
-const mapStateToProps = state => ({
-  stories: getReadableStories(state),
-  error: getFetchError(state),
-});
-
-export default connect(
-  mapStateToProps
-)(Stories);
+export default inject('storyStore')(observer(Stories));

src/actions/story.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { doArchiveStory } from '../actions/archive';
+import { inject, observer } from 'mobx-react';
 import { ButtonInline } from './Button';
 import './Story.css';
 
-const Story = ({ story, columns, onArchive }) => {
+const Story = ({ story, columns, archiveStore }) => {
   const {
     title,
     url,
@@ -29,19 +28,12 @@ const Story = ({ story, columns, onArchive }) => {
         {points}
       </span>
       <span style={{ width: columns.archive.width }}>
-        <ButtonInline onClick={() => onArchive(objectID)}>
+        <ButtonInline onClick={() => archiveStore.archiveStory(objectID)}>
           Archive
         </ButtonInline>
       </span>
     </div>
   );
 }
 
-const mapDispatchToProps = dispatch => ({
-  onArchive: id => dispatch(doArchiveStory(id)),
-});
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(Story);
+export default inject('archiveStore')(observer(Story));

src/actions/story.test.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import { Provider } from 'mobx-react';
 import App from './components/App';
-import store from './store';
+import * as stores from './store';
 import './index.css';
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(
-  <Provider store={store}>
+  <Provider { ...stores }>
     <App />
   </Provider>,
   document.getElementById('root')