MobX Uber-Simplified Boilerplate

README.md

MobX Uber-Simplified (mostly stripped) Boilerplate

Based on: YouTube: Easy MobX and Redux Comparison (Mar 2018)

MobX: Basic Flow

Action: Functions 
	--> (updates)
		--> Observable Properties: State
			|--> (updates / to render current dom)
			|--> Computed Perform Operations
	^
	|		\	--> View / Component
	\---------------/ (actions are triggered / called in the view)

[GalleryStore.js]

import { observable, action, runInAction } from 'mobx';
export default class GalleryStore {
	@observable term = "";
	@observable images = [];
	@observable status = 'initial';
	@action
	fetchImages = async term => {
	this.term = term;
		this.images = [];
		this.status = 'searching';
		try {
			const response = await axios.get('http...', {params: {}});
			this.setImages(response.data.results);
		} catch (error) {
			runInAction(() => { this.status = 'error'; });
}	};	} // <-- Please never do this for real. :)

[index.js]

import { Provider } from 'mobx-react';
import GalleryStore from "./stores/GalleryStore";
const galleryStore = new GalleryStore(); // from `class GalleryStore {}`
ReactDOM.render( <Provider galleryStore={galleryStore}><App /></Provider>, root );

[App.js]

import { inject, observer } from 'mobx-react';
@inject("galleryStore")
@observer
export default class App extends React.Component {
	componentDidMount() { this.props.galleryStore.fetchImages("Mountains"); }
	render() { // const { term, status, images } = this.props.galleryStore; return (); }
}

[Form.js]

import { inject, observer } from 'mobx-react';
@inject("galleryStore")
@observer
export default class Form extends React.Component {
	// this.props.galleryStore.fetchImages(term);
}