Использование действий React Mobx из других хранилищ внутри компонентов и других хранилищ

в моем собственном приложении для реагирования я хочу использовать mobx для управления состоянием, мой магазин разделен на несколько магазинов / файлов, и, поскольку я хочу иметь возможность вызывать действия магазина из других магазинов, я реализую GlobalStore, где я создаю экземпляры других магазинов .

Я хочу иметь возможность делать что-то подобное из моих компонентов

import { PostStore }  from '../stores/PostStore.js'
import { UserStore }  from '../stores/UserStore.js'
import { VenueStore }  from '../stores/VenueStore.js'


class GlobalStore
{
    
    postStore = new PostStore(this);
    userStore = new UserStore(this);
    venueStore = new VenueStore(this);

}

export default new GlobalStore;

Это делает так, что, используя собственный API Context-Provider, я могу вызывать каждое действие магазина во ВСЕХ моих компонентах, используя globalStore в качестве ссылки:

В любом компоненте я могу:

globalStore.postStore.listPosts()

Однако я все еще не уверен, как мне получить доступ к другим действиям магазина из ДРУГИХ МАГАЗИНОВ.

Что делать, если внутри postStore я хочу использовать spinnerStore (для отображения ожидающих вызовов axios, состояния ошибки или успеха):

@action.bound getPosts = flow(function * (payload) 
    {
        this.spinnerStore.setData({status: 1});
        try 
        {
            this.spinnerStore.setData({status: 2, response: response});
            let response = yield axios.get('/api/posts', { params: payload })
            return response;
        } 
        catch (error) {
            console.error(error);
            this.spinnerStore.setData({ status: 3, errors: error });
            throw error;
        }
    })

Здесь spinnerStore будет неопределенным ...


reactjs javascript mobx native
person gabogabans    schedule 27.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Однако я все еще не уверен, как мне получить доступ к другим действиям магазина из ДРУГИХ МАГАЗИНОВ.

Когда вы создаете экземпляр магазина, вы можете назначить одно из его свойств другому экземпляру магазина. Это то, что вы включили в свой пример

class Foo {
  constructor(instance) {
    this.instance = instance
  }
}

class Bar {}

const foo = new Foo(new Bar());

foo.instance instanceof Bar; // true

Теперь ваш экземпляр foo имеет доступ к любым общедоступным свойствам / методам, определенным на Bar

class Foo {
  constructor(instance) {
    this.instance = instance
  }
}

class Bar {
  @observable isLoading = false;
  @observable data = null;

  @action
  getData() {
    this.isLoading = true;
    return axios.get('/foo').then((data) => {
      this.isLoading = false;
      this.data = data;
    }).catch(e => {
      this.isLoading = false;
    });
  }
}

const foo = new Foo(new Bar());

// in react
const MyComponent = ({ foo }) => (
  <div>
    {foo.instance.isLoading && <Spinner />}

    <button onClick={foo.instance.getData}>
     will call Bar action from Foo store
    </button>
  </div>
);

export default lodash.flowRight(
  mobx.inject((stores) => ({ foo: stores.fooStore })),
  mobx.observer
)(MyComponent)

В вашем примере с генераторами вы не можете использовать толстые стрелки, поэтому this больше не привязан к вашему экземпляру класса, поэтому он будет неопределенным. Использование обещаний и толстых стрелок решает эту проблему.

person Daniel Lizik    schedule 27.10.2020