Core Concepts

React's ecosystem includes various tools for state management, with MobX offering a reactive approach through observable patterns.

Decorators in ES7

Decorators are functions that modify classes or class members, serving as syntactic sugar for Object.defineProperty. They are commonly used in MobX and Angular with TypeScript.

Configuration

1. Install required packages:

npm i @babel/plugin-proposal-decorators --save

2. Update package.json:

"babel": {
  "presets": ["react-app"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

MobX Core Components

• Obseervable: Marks class members as trackable state.
• Action: Functions that modify state (synchronous/asynchronous).

MobX-React Utilities

• Provider: Supplies stores to the component tree.
• Inject: Injects stores into component props.
• Observer: Forces re-renders when observed state changes.

Implementation Steps

1. Setup Stores:

import { observable, action } from 'mobx';

class HomeStore {
  @observable bannerlist = [1, 2, 3];
  @action updateBannerlist = () => {
    this.bannerlist = [4, 5, 6];
  };
}
export default HomeStore;

2. Root Store:

import HomeStore from './HomeStore';

class RootStore {
  constructor() {
    this.home = new HomeStore(this);
  }
}
export default new RootStore();

3. Provider Setup:

import { Provider } from 'mobx-react';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. Component Usage:

import { inject, observer } from 'mobx-react';

@inject('store')
@observer
class MyComponent extends React.Component {
  render() {
    const { bannerlist } = this.props.store.home;
    return <div>{bannerlist.join(', ')}</div>;
  }
}