The document provides an introduction to building reactive applications using React and MobX, highlighting MobX's simplified architecture and state management compared to Redux. It explains key concepts such as observable attributes, computed values, and the use of decorators such as @observer and @action. Additionally, it outlines the steps to create a React app with MobX integration, including code examples and links to relevant resources.

1. React and MobX
A Truly Reactive App

2. Intro
Jacob Orshalick
solutionsfit | http://www.solutionsfit.com
jacob@solutionsfit.com

3. React Basics
UI Component framework
Provides the View layer in MVC
Components can have internal state
Not intended to provide complete UI solution

4. Observer Pattern

5. Flux Architecture

6. Flux Architecture
Facebook Approach
More complicated Observer Pattern
State Immutability, makes undo operations easy
Redux is most commonly used framework

7. Redux
Actions: objects that triggers events
Store: Dispatches actions to Reducers to modify state
Reducers: logic functions, modify state based on actions
View Components: react to state changes

8. Redux in Action

9. How about MobX?
Simplified architecture
Intuitive behavior
Unobtrusive state management
Simply put, much less code!

10. MobX Data Flow

11. Stores
Stores are the classes that maintain the app state
Contain the app data and operations on that data
Provide the state to components

12. @observable
Used on attributes that hold page state
Wraps the attribute with MobX magic
Changes to the object will update observers
export class UserStore {
@observable users: User[] = [];
@observable currentUser: User;
... ...
}

13. @computed
Computed values are derived from state
Similar to formulas in spreadsheets
Highly optimized, don’t be afraid to use them
@computed public get suggestedUsername() {
if (this.currentUser.firstName && this.currentUser.lastName) {
return this.currentUser.firstName.toLowerCase()
+ '.' + this.currentUser.lastName.toLowerCase();
}
return null;
}

14. @observer
Turns ReactJS components into reactive components
Ensures that data changes result in re-rendering
Applies only to MobX wrapped data
@observer
export class UserForm extends React.Component<UserFormProps, {}> {
... ...
}

15. @action
Used to annotate functions that modify state
Function becomes “transactional”
State mutations batched until outer @action completes
@action public removeUser(removeUser: User) {
this.users = this.users.filter(user => removeUser !== user);
}

16. @inject and <Provider>
<Provider> passes stores to child components
Child components can @inject stores from <Provider>
Injection is performed by name
const stores = {
userStore: new UserStore()
};
ReactDOM.render(
<Provider {...stores}>
<App />
</Provider>,
document.getElementById('root') as HTMLElement
);
————————————————————————————————————————————————————————
interface AppProps {
userStore?: UserStore;
}
@inject('userStore')
@observer
class App extends React.Component<AppProps, {}> {
... ...
}

17. How can I get started?
Install Node.js and npm
Create a new React app
npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start

18. How can I get started?
Add the following to your package.json
{
"name": "mobx-example",
"version": "0.1.0",
"private": true,
"dependencies": {
... ...
"mobx": "^3.6.2",
"mobx-react": “^4.4.3",
... ...
}
}

19. Code Example
React and MobX Code Example Walk-through

20. Questions?
Jacob Orshalick
solutionsfit | http://www.solutionsfit.com
jacob@solutionsfit.com

21. References
https://redux.js.org
https://mobx.js.org
https://github.com/facebook/create-react-app
https://www.npmjs.com/get-npm
All images are the property of their creators