Как можно вызвать действие из одного хранилища (стора) в другом хранилище (сторе) с использованием MobX?

Как в коде `AuthStore` можно вызвать экшен из `profileStore` в строке `await profileStore.getObservables();`?
  • 28 октября 2024 г. 12:43
Ответы на вопрос 2
В MobX можно вызывать действия (экшены) одного хранилища из другого, просто обращаясь к нужному хранилищу. Предположим, у вас есть два стора: `AuthStore` и `ProfileStore`, и вы хотите вызвать экшен `getObservables` из `ProfileStore` в `AuthStore`.

Вот как это можно сделать:

1. **Сначала убедитесь, что вы правильно инициализируете ваши стора, чтобы у каждого из них был доступ к другому.** Это можно сделать, например, как через инъекцию зависимостей, так и через создание глобального стейта.

2. **Вызов экшена другого стора:** Внутри вашего `AuthStore` вы можете просто ссылаться на метод другого стора.

### Пример:

```javascript
// ProfileStore.js
import { makeAutoObservable } from "mobx";

class ProfileStore {
    constructor() {
        makeAutoObservable(this);
    }

    getObservables() {
        // Логика вашего действия
        console.log("Получение данных профиля...");
    }
}

export const profileStore = new ProfileStore();

// AuthStore.js
import { makeAutoObservable } from "mobx";
// Импортируем ProfileStore
import { profileStore } from "./ProfileStore";

class AuthStore {
    constructor() {
        makeAutoObservable(this);
    }

    async someAuthMethod() {
        try {
            // Вызов экшена из ProfileStore
            await profileStore.getObservables();
        } catch (error) {
            console.error("Ошибка при получении данных профиля:", error);
        }
    }
}

export const authStore = new AuthStore();
```

### Объяснение:
- В этом примере в `AuthStore` мы импортируем `profileStore`.
- В методе `someAuthMethod` мы можем просто вызывать `profileStore.getObservables()`, который будет выполнять свою логику.

### Использование:
Теперь вы можете вызвать `someAuthMethod` из вашего компонента, и он автоматически вызовет `getObservables` из `ProfileStore`. Убедитесь, что вы вызываете методы стора из контекста реактивного компонента, чтобы MobX мог отслеживать изменения. 

### Примечания:
- Проверьте зависимости стора, чтобы избежать ненужных циклических зависимостей.
- Убедитесь, что оба хранилища (AuthStore и ProfileStore) обернуты в `Provider`, если вы используете контекст для управления состоянием.
Можно пробросить RootStore внутрь необходимого стора: 

export class RootStore {
  constructor() {
    this.authStore = new AuthStore(this);
  }
}

export class AuthStore {
  private rootStore: RootStore;

  constructor(rootStore: RootStore) {
    this.rootStore = rootStore;
  }

  signIn = (email: string, password: string) => {
    // ...
    this.rootStore.profileStore.getObservables();
    // ...
  };
}
Похожие вопросы