Как правильно передать данные хранящиеся в mobx, из родительского в дочерний?

Question

[BigCrazyDirtyKingKong]

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

Answer 1

[BigCrazyDirtyKingKong]

Решил проблему мемоизацией функции setFilters, которую передавал дочернему компоненту.

Answer 2

[Alexandroppolus]

State в родительском тут вообще ни при делах. Если родительский у тебя обернут в observer, он обновится при изменении значений, передаст новые значения в пропсы дочернего, и тот тоже обновится. Отдельный кейс, когда в дочерний передается глубоко наблюдаемый объект, внутри которого меняются поля. Тогда родительский обновляться не будет, а дочерний надо обернуть в observer.

Comments

[BigCrazyDirtyKingKong]

Тоже ожидаю такое поведение , но почему-то этого не происходит :/

[Alexandroppolus]

Было бы неплохо увидеть лаконичный пример кода, где работает неправильно

[BigCrazyDirtyKingKong]

Родительский компонент

export const Parent = observer(() => {
  ...
  const [page, setPage] = useState(parseInt(searchParams.get('page')) || 1)

	
  const fetchData = async () => {
    try {
      const {id} = await categoriesStore.getCategoryId({
        slug: categorySlug,
      })
      const feed = await productsFeedStore.getProductsFeed({
        filters: {
          category: {exact: id},
        },
        perPage: perPage,
        page: page,
      })
      return feed
    } catch (error) {
      console.error('Fetching data failure', error)
    }
  }

  useEffect(() => {
    const getFeed = async () => {
      const {results, count} = await fetchData()
      setProductsCount(count)

      if (isFirstRender) {
        const [minPrice, maxPrice] = calculatePriceRange(results)
        productsFeedStore.setFilters(minPrice, maxPrice)
        setMinPrice(minPrice)
        setMaxPrice(maxPrice)
      }
    }

    getFeed()
  }, [page, categorySlug])

  return (
    <>
	...
        <Children
          products={productsFeedStore.data}
          applyFilters={setFilters}
          minPrice={minPrice}
          maxPrice={maxPrice}
          feedFilters={productsFeedStore.filters}
          className={styles.productsFeed}
        />
        <Pagination
          totalRecords={productsCount}
          elementsPerPage={perPage}
          currentPage={page}
          changePage={setPage}
          className={styles.pagination}
        />
	...
    </>
  )
})

Стор

import {makeAutoObservable} from 'mobx'
import productsApi from 'src/api/products'

const productsFeed = makeAutoObservable({
  data: null,
  filteredData: null,
  filters: null,
  isLoading: false,
  error: null,

  getProductsFeed({filters, perPage, page}) {
    this.data = null
    this.error = null
    this.isLoading = true
    return new Promise((resolve) => {
      productsApi
        .getProductsFeed(filters, perPage, page)
        .then((data) => {
          this.isLoading = false
          this.data = data.results
          resolve(data)
        })
        .catch((error) => {
          this.isLoading = false
          this.error = error
        })
    })
  },
})

export default productsFeed

Проблема в том, что когда изменяется page и срабатывает эффект, в дочерний приходит null(в products props), но обновленные данные не приходят. Data в productsFeed - это массив.

[Alexandroppolus]

this.data = data.results

Эта строка точно отрабатывает? И присваивает массив?
Попробуй добавить runInAction. Вообще говоря, обычно работает и без него, но хрен знает, что могло измениться..

[BigCrazyDirtyKingKong]

Alexandroppolus, да, отрабатывает. Данные и в стор попадают и в родительский компонент, если консолить. Но вот в дочерний никак, потому и спрашивал, как передавать правильно (мб что-то не так делаю думал). runInAction тоже пробовал - не помогает. Что бы runInAction не прописывать у меня mobx так настроен:

import {configure} from 'mobx'

configure({
  reactionScheduler: (f) => {
    setTimeout(f)
  },
})

В любом случае, спасибо. Ответ выходит не на поверхности, буду разбираться.

[Alexandroppolus]

и в родительский компонент

то есть имеет место ререндер родителя при заполненном массиве productsFeedStore.data, но не апдейтится дочерний? Тогда это уже не в МобХ проблема, а где-то в Реакте.

Ты может в Children сделал что-то странное с пропсом products? Покажи код чилдрена, интересно даже )

setTimeout(f)

На мою имху, лучше делать обновление наблюдаемых в отдельном методе (который станет action) и его вызывать. setTimeout убивает одну из самых крутых фич мобикса (по мнению автора) - синхронность обновления. Но это оффтоп в рамках обсуждения..

[BigCrazyDirtyKingKong]

Alexandroppolus, в дочернем по массиву products рендерятся карточки товаров и всё. Еще проводил такой эксперимент - менял page спустя n-секунд полсле загрузки страницы:
setTimeout(()=>{setPage(2)}, 3000)

При таком подходе данные попадают в дочерний. А если вручную менять page - нет.