Повторно используемые дочерние компоненты с магазином mobx, должен ли я ссылаться на родительский магазин на дочерний?

Я создаю виджет React, у которого есть родительский компонент и два дочерних элемента, у каждого из которых есть собственное хранилище.

<Parent>
  <ChildA />
  <ChildB />
</Parent>

Мне нужно, чтобы дочерние компоненты можно было использовать повторно. Однако в обоих дочерних хранилищах есть некоторые наблюдаемые / вычисляемые переменные, которые им нужны из родительского хранилища. Должен ли я передать родительский магазин детям?

parentStore = new ParentStore();
childStore = new ChildStore(parentStore);

Я не уверен, что это лучшая практика. Разве это не означает, что каждый другой родительский элемент, который будет вызывать этот дочерний компонент, должен будет иметь такие же точные имена переменных?


reactjs mobx mobx-react
person Sveta    schedule 11.02.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Прежде всего, есть два популярных способа разделения состояния между магазинами.

Один из них вы уже показали: передача одного магазина в качестве параметра другому.

Второй подход (и, на мой взгляд, лучший) - установить rootStore, который будет содержать общую область видимости для остальных магазинов:

class RootStore {
    constructor() {
        this.userStore = new UserStore(this);
        this.todoStore = new TodoStore(this);
    }
}

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

    getTodos(user) {
        return this.rootStore.todoStore.todos.filter(todo => todo.author === user)
    }
}

class TodoStore {
    @observable todos = []

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

Таким образом вы сможете связать все магазины.

С другой стороны, вы сказали, что ваш компонент должен быть многоразовым, в таком случае, возможно, вам не стоит прикреплять его напрямую к хранилищу, почему бы не передавать эти данные с помощью реквизита?

person dygufa    schedule 25.02.2018