关于 reactjs：使用 mobX 和 react Context 从类访问存储

Access stores from class using mobX and react Context

我在 mobx/mobx-react-lite 和 react 钩子上有点挣扎。

我想从一个班级更新我的一个商店中的一个属性，但不知何故我无法让它工作。以下是我的商店如何组合的一些示例，以及我想从中调用我的商店的组件和类。我正在使用 react 中的 Context 来获取我的钩子组件中的商店，并且效果很好。

// FooStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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;

// 酒吧商店

1
2
3
4
5
6
7
8
9
10
11
12
13

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()导出)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 的类。 (注意，不是组件类)

//示例类

1
2
3
4
5
6
7
8
9

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

// Call BarStore.setBar(1000)

return”Some string”
}
}

任何人都可以将我推向正确的方向吗？

上下文是一个 React 概念。通过Context导出你的商店不好。 (可能您应该需要在另一个环境中使用它！)您应该导出存储本身并通过上下文将其package在您的最高级别组件中。

//你的商店：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 …

1
2
3
4
5
6
7
8
9
10

import store from ‘./yourStore’;
import { createContext } from”react”;

const GlobalStore = createContext(store);

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

//任何其他js文件

1
2
3
4
5
6
7
8
9
10
11

import store from ‘./yourStore’;

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

store.BarStore.setBar(1000)

return”Some string”
}
}

Access stores from class using mobX and react Context

猜你喜欢