How can I integrate MobX into my React application?

How can I integrate MobX into my React application?

To integrate MobX, first install it using npm or yarn. Then, create a store and use the @observer decorator in your components.

What is a MobX store and how do I create one?

A MobX store is a JavaScript object that holds your application's state. You can create one by defining a class and using observable to make properties reactive.

Can you show me a simple example of a MobX store?

Sure! Here's a basic example:

import { observable, action } from 'mobx';

class CounterStore {
    @observable count = 0;

    @action increment() {
        this.count++;
    }
}

const counterStore = new CounterStore();
export default counterStore;

How do I connect this store to a React component?

You can connect the store to a React component by using the @observer decorator. Here's an example:

import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './CounterStore';

const Counter = observer(() => {
    return (
        <div>
            <h1>{counterStore.count}</h1>
            <button onClick={() => counterStore.increment()}>Increment</button>
        </div>
    );
});

export default Counter;