Как использовать MobX obervables для рендеринга стороннего React Component (FullCalendar)?

Question

Я пытаюсь обернуть компонент FullCalendar React своим собственным функциональным компонентом React с хуком useContext для доступа к хранилищу MobX (я мог бы использовать хранилище в других компонентах) и observer(), чтобы он реагировал на изменения в хранилище. ,Мой компонент реагирует так, как я ожидал, но у меня возникают проблемы с визуализацией компонента FullCalendar после изменения.

Я пытался найти решение, оборачивая <FullCalendar> в <Observer>, играя с autorun() и reaction(), но ничего не получалось. Я должен что-то упустить

Эта песочница https://codesandbox.io/s/mobx-fullcalendar-xejn9 пока показывает упрощенную версию моего решения.

Нажатие на кнопку сверху добавляет событие в наблюдаемое хранилище, которое отображается в списке под ним. Но календарь не показывает новое событие. Как ни странно, если я внесу изменение в код и сохраню его, CodeSandbox вызовет рендеринг, и события отобразятся в календаре.

Answer 1

Благодаря @ADyson я нашел решение. Вместо передачи статического списка событий компоненту FullCalendar

events={store.events}

я могу передать функцию извлечения событий. Поэтому в самом простом случае я могу просто передать события из хранилища в функцию successCallback, и она работает.

events={(fetchInfo, successCallback, failureCallback) => {
  successCallback(store.events);
}}

Я также обновил CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9.