使用 mobX 和 React Context 从 class 访问商店

Question

我在使用 mobx/mobx-react-lite 和 React 挂钩方面有些挣扎。

从 class 我想更新我的一家商店中的属性，但不知何故我无法让它工作。以下是我的商店如何组合的一些示例，以及我想从中调用我的商店的组件和 class。我正在使用 React 中的 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;

// 酒吧店

import { observable, action } from "mobx";

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

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

export default BarStore;

//Store（将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);

这是 class 我希望能够调用我的 barStore。（注意，不是组件class）

//示例类

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

        // Call BarStore.setBar(1000)

        return "Some string"
    }
}

任何人都可以推动我朝着正确的方向前进吗？

Answer 1

Context 是一个 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"
    }
}

使用 mobX 和 React Context 从 class 访问商店

Access stores from class using mobX and react Context

typescript

reactjs

mobx

mobx-react