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

【问题标题】：MobX: How from an action of one storage to call an action, another storageMobX：如何从一个存储的动作调用另一个存储的动作
【发布时间】：2019-05-18 06:18:20
【问题描述】：

我最近在使用 MobX，我想向您寻求帮助。我想在从服务器更新待办事项列表时，运行微调器。

在 Redux 中，当 action 和 reducer 分开时，我没有看到任何问题。我唯一能想到的就是做一个reducer，但不会不像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)
    }
}

【问题讨论】：

标签： reactjs action store mobx

【解决方案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)
    }
}

【讨论】：