Q:

MobX: How from an action of one storage to call an action, another storage

I'm with MobX very recently and I want to ask you for help.
I want when updating the to-do list from the server, run the spinner.
In Redux, I did not see any problems with this when actions and the reducers are separated.
The only thing I can think of is to make a reducer, but it will not will not be like a MobX.
Showing the short structure of my code.
I ask you to tell how beautifully to solve this problem.
Thank you very much

// --->  index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'

import App from './Pages/App'
import './index.css'
import registerServiceWorker from './registerServiceWorker'
import RootStore from './Stores'

ReactDOM.render(
    <Provider RootStore={new RootStore()}>
        <App />
    </Provider>,
    document.getElementById('root') as HTMLElement
)
registerServiceWorker()

// --->  Store/index.ts
import todo from './todo'
import ui from './ui'

export default class RootStore {
    todoStore = new todo()
    uiStore = new ui()
}


// --->  Store/ui.ts
import { observable, action } from 'mobx'

export default class Ui {
    @observable isSinning: boolean = false

    @action
    sinning(_isSinning: boolean) {
        this.isSinning = _isSinning
    }
}


// --->  Store/todo.ts
import { observable, action } from 'mobx'
import { api } from '../REST/api'
import ui from './ui'
const myUi = new ui()

export default class ToDo {
    @observable todoList: any[] = []

    @action.bound
    async getToDoListDateRange(startDate: string, endDate: string) {
//------------------> Need to turn on the spinner
        myUi.sinning(true)
        let _todo = await api.fetchToDo(startDate, endDate)
        this.todoList = await _todo
//------------------> Need to turn off the spinner
        myUi.sinning(false)
    }
}

A:

// --->  index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'

import App from './Pages/App'
import './index.css'
import registerServiceWorker from './registerServiceWorker'
import RootStore from './Stores'

ReactDOM.render(
    <Provider RootStore={new RootStore()}>
        <App />
    </Provider>,
    document.getElementById('root') as HTMLElement
)
registerServiceWorker()

// --->  Store/index.ts
import todo from './todo'
import UiStore from './ui'

export default class RootStore {
    todoStore = todo.getInstance()
    uiStore = UiStore.getInstance()
}


// --->  Store/ui.ts
import { observable, action } from 'mobx'

export default class UiStore {
    @observable isSinning: boolean = false

    @action
    sinning(_isSinning: boolean) {
        this.isSinning = _isSinning
    }
    private static instance: UiStore
    public static getInstance(): UiStore {
        if (!UiStore.instance) {
            UiStore.instance = new UiStore()
        }
        return UiStore.instance
    }
}


// --->  Store/todo.ts
import { observable, action } from 'mobx'
import { api } from '../REST/api'
import ui from './ui'
const myUi = new ui()

export default class ToDo {
    const UiInstance = UiStore.getInstance()

    private static instance: ToDo
    public static getInstance(): ToDo {
        if (!ToDo.instance) {
            ToDo.instance = new ToDo()
        }
        return MatchesStore.instance
    }

    @observable todoList: any[] = []


    @action.bound
    async getToDoListDateRange(startDate: string, endDate: string) {
//------------------> Need to turn on the spinner
 UiInstance.addSpinning(true)
        let _todo = await api.fetchToDo(startDate, endDate)
        this.todoList = await _todo
//------------------> Need to turn off the spinner
        myUi.sinning(false)
    }
}

