ReactJS: jQuery как компоненты, созданные с помощью Flux

Question

Сценарий: Я хочу расширить существующий компонент React и доставить его в виде автономного компонента.

Возьмем, к примеру, Facebook FixedDataTable (https://github.com/facebook/fixed-data-table), добавим некоторые дополнительные функции и оберните его в качестве повторно используемого компонента.

Первая дополнительная функция будет «множественный выбор строки» - демо можно найти здесь http://goo.gl/qRE9eB

Что кто-то может заметить здесь, что MovieTable обертка обрабатывает проверенное/не проверяется состояние строк. Итак, что я хочу сделать дальше, это делегировать ответственность за обработку состояния в хранилище Flux (для простоты рассмотрим реализацию Facebook Flux https://github.com/facebook/flux). Вероятно, сейчас это не имеет особого смысла, но поскольку сложность MovieTable растет (сортировка, бесконечная прокрутка и т. Д.), Интеграция Flux была бы необходима. Согласно архитектуре Flux (Action -> Dispatcher -> Store -> View), _onRowClick и _onCheckAll будут запускать действия, которые позволят Храните сохранять состояние и уведомлять представление о том, что что-то было изменено, для того, чтобы представление повторно отображалось новое состояние флажка.

Предположим, что я хочу связать вид MovieTable вместе со своими действиями/диспетчером/хранилищем как автономный компонент, чтобы впоследствии его можно было повторно использовать. Первый вопрос:

1) Имеет ли смысл объединить представление/действия/диспетчер/хранилище в качестве автономного компонента? С моей точки зрения, преимущества очевидны: тот, который использует компонент, не нуждается в заботе о «внутренних компонентах» компонента (например, выбор строки, бесконечная прокрутка, сортировка и т. Д.)

Давайте рассмотрим что я решил собрать все вместе. Следующие вопросы:

2) Как я могу получить данные из магазина? например некоторым частям приложения может потребоваться получить все выбранные строки из хранилища компонента

3) Как я могу активировать действия на диспетчере компонента? например Я хочу программно проверить некоторые строки. Сначала я думал, что клиент должен иметь доступ к действиям компонента

4) Учитывая данные 1), 2) и 3), я хочу иметь повторно используемый компонент DataTable что «чувствует» как традиционный компонент jQuery (например, jqGrid http://goo.gl/b7jPo3). Конечной целью было бы объединить jQuery как компоненты с компонентами React на той же странице, не вызывая слишком большой боли тому, что их смешивает.

Answer 1

Я думаю, что это нормально, чтобы реализовать сложные библиотеки с флюсом (или любым другим шаблоном проектирования) под капотом, но что библиотека должна приложить все усилия, чтобы скрыть эти сложности от конечного пользователя. Например, библиотека Node.js может использовать обратные вызовы, async control flow library или обещает управлять асинхронными операциями внутри самой библиотеки, но чтобы позволить пользователям взаимодействовать с большинством приложений Node, она должна по крайней мере поддерживать обратные вызовы в публичном API. (Так как обещания становятся более первоклассными в JavaScript, этот шаблон может меняться, но я надеюсь, что вы поймете мою точку зрения.)

В React наименее общим знаменателем для компонентных API являются реквизиты (для предоставления данных, и предоставлять функциональные ссылки для выполнения обратных вызовов). Если это вообще возможно, попробуйте сделать свой API работать, используя только реквизиты.

Если в очень большом или сложном компоненте это просто невозможно (и я бы утверждал, что стратегия + + реквизит компонента + can take you a very long way до того, как она действительно сломается), может быть разумно выявить более традиционный объект/метод основанный на API. Тем не менее, я бы все же стремился не подвергать потоку флюса - facade с помощью метода dataTable.selectRows(rowIndicies) (который делегирует действия) легче понять/запомнить и менее хрупкий/устойчивый к изменению, чем dataTable.dispatcher.dispatch(DataTableActions.selectRows(rowIndicies)).

---

Я не совсем уверен, что я понимаю, пункт # 4 (может быть, это не вопрос?) Если я уже строит Реагировать приложение, у меня нет никакого желания подвергать React компоненты, плагины JQuery, если я создаю приложение non-React, jQuery, у меня нет желания требовать от React как зависимости просто использовать таблицу данных.