Получите доступ к магазинам из класса с помощью mobX и реагируйте на Context

Question

Я немного борюсь с хобами mobx / mobx-реагировать-облегчить и реагировать.

Из класса я хочу обновить свойство в одном из моих магазинов, но каким-то образом я не могу заставить его работать. Вот несколько примеров того, как объединяются мои магазины, а также компонент и класс, из которого я хочу позвонить в мой магазин. Я использую Context от реакции, чтобы получить хранилища в моем компоненте хука, и это работает отлично.

// FooStore

import { observable, action } from "mobx";
import ExampleClass from "app/services/exampleClass";

export class FooStore {
    @observable
    public foo: string = "";

    @action
    public doSomething() {
        this.foo = ExampleClass.doSomething()
    }
}

export default FooStore;

// BarStore

import { observable, action } from "mobx";

export class BarStore {
    @observable
    public bar: number = 0;

    @action
    public setBar(value: number) {
        this.bar
    }
}

export default BarStore;

// Store (Объединение хранилищ в один и экспорт с помощью createContext ())

import { FooStore } from "./FooStore";
import { BarStore } from "./BarStore";
import { createContext } from "react";

class Store {
    public fooStore: FooStore;
    public barStore: BarStore;
    constructor(){
        this.fooStore = new FooStore();
        this.barStore = new BarStore();
    }
}

const stores = new Store()

export default createContext(stores);

Это класс, в который я хочу позвонить в мой barStore. (Обратите внимание, не класс компонента)

// ExampleClass

export default class ExampleClass {
    public static doSomething(): string {
        // ...

        // Call BarStore.setBar(1000)

        return "Some string"
    }
}

Может кто-нибудь подтолкнуть меня в правильном направлении для этого?

Answer 1

Контекст - это концепция React. не очень хорошо экспортировать ваш магазин по контексту. (Может быть, вам нужно использовать его в другой среде!) Вы должны экспортировать само хранилище и обернуть его через контекст в компоненте самого высокого уровня.

// Ваш магазин:

import { FooStore } from "./FooStore";
import { BarStore } from "./BarStore";

class Store {
    public fooStore: FooStore;
    public barStore: BarStore;
    constructor(){
        this.fooStore = new FooStore();
        this.barStore = new BarStore();
    }
}

const stores = new Store()

export default stores;

// App.js ...

import store from './yourStore';
import { createContext } from "react";

const GlobalStore = createContext(store);

export default () => {
    <GlobalStore.Provider>
       <Main />
    </GlobalStore.Provider>
}

// Любой другой файл js

import store from './yourStore';

export default class ExampleClass {
    public static doSomething(): string {
        // ...

        store.BarStore.setBar(1000)

        return "Some string"
    }
}