MobX：从一个存储的动作如何调用一个动作，另一个存储

Question

我与MobX最近，我想请你帮忙。我想从服务器更新待办事项列表时，运行的微调。

在终极版，我没有看到任何问题，这个时候行动和减速是分开的。我能想到的唯一的事情就是让减速，但不会不会像一个MobX。

显示我的代码的短结构。

我问你，告诉如何精美，来解决这个问题。

非常感谢你

// --->  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)
    }
}

Answer 1

// --->  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)
    }
}