MobX: как из действия одного хранилища вызвать действие другого хранилища - PullRequest
Новая
       75

MobX: как из действия одного хранилища вызвать действие другого хранилища

0 голосов
/ 17 декабря 2018

Я с MobX совсем недавно и хочу попросить вас о помощи.Я хочу, чтобы при обновлении списка дел с сервера запустил счетчик.

В Redux я не видел проблем с этим, когда действия и редукторы разделены.Единственное, о чем я могу думать, это сделать редуктор, но он не будет похож на 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)
    }
}

1 Ответ

0 голосов
/ 08 февраля 2019 

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