Mobx: изменить значения магазина из другого магазина - PullRequest
Новая
       25

Mobx: изменить значения магазина из другого магазина

0 голосов
/ 11 июля 2019

Я использую mobx-реагировать-Lite с крючками.

У меня есть два магазина.AuthStore SomeOtherStore

Это моя кукла AuthStore

import { observable, decorate, action } from 'mobx';
import { createContext } from 'react';
import { ROLE_LOGISTICS_MANAGER } from '../settings/constants';
import AuthService from '../services/AuthService';

class AuthStore {
  constructor() {
    this.authService = new AuthService();
  }

  currentMode = ROLE_LOGISTICS_MANAGER;

  authenticating = true;

  isLoggedIn = false;

  userId = null;

  loginLoading = false;

  login = async params => {
    this.loginLoading = true;
    try {
      const data = await this.authService.loginAsync(params);
      this.loginLoading = false;
      this.isLoggedIn = true;
    } catch (e) {
      console.error(e);
      this.loginError = e;
    } finally {
      this.loginLoading = false;
    }
  };
}
decorate(AuthStore, {
  currentMode: observable,
  loginLoading: observable,
  isLoggedIn: observable,
  authenticating: observable,
  userId: observable,
  fetchUser: action,
  login: action
});
export const AuthStoreContext = createContext(new AuthStore());

Теперь давайте скажем, что я хочу изменить isLoggedIn из другого магазина. Как я могу это сделать?Я пытался найти способы в документах, не мог найти твердое решение.Я использую хуки с Mobx-реагировать на Lite Так что обычно я использую MOBX, как 

const authStore = useContext(AuthStoreContext);

1 Ответ

0 голосов
/ 13 июля 2019

Это обычный шаблон для хранения в качестве свойств на RootStore, каждый из которых имеет ссылки на корень. Таким образом, вы можете иметь такую ​​структуру: 

class RootStore {
  constructor (auth, ui) {
    this.auth = new AuthStore(this)
    this.ui = new UiStore(this)
  }
}

class AuthStore {
  constructor (rootStore) {
    this.rootStore = rootStore
  }

  logout() {
    this.isLoggedIn = false
  }
}

decorate(AuthStore, {
  logout: action
})

Затем, когда вам нужно вызвать функцию в другом хранилище, вы можете использовать ссылку на корень в качестве пути. Шаблон описан более подробно здесь . Возможный пример использования с useContext может быть: 

const { someStore } = useContext(rootStoreContext)
someStore.rootStore.auth.logout()
...