Советы по настройке Flux
На прошлой неделе моя группа решила создать приложение с использованием React, чтобы узнать, что такое фреймворк, и, надеюсь, использовать React Native для создания мобильного приложения. Я нашел руководство и документацию по React невероятно полезными и почувствовал, что могу сразу приступить к написанию базового приложения. Учебник Flux, однако, был менее дружелюбным. Мне потребовалось некоторое время, чтобы понять, что мне нужно для использования Flux, поэтому, надеюсь, это может помочь людям, у которых были такие же проблемы, как у меня.
Важно отметить, что Flux — это не фреймворк, а просто архитектурный паттерн (см. первую строку документов). Используя шаблон Flux, данные проходят через приложение в одностороннем порядке. Следуя этому потоку данных, становится легче отслеживать в коде влияние данных и результирующие изменения. Но использование Flux по-прежнему требует некоторой настройки в вашем проекте, что не так очевидно.
Во-первых, для вашей среды разработки будет полезно установить Browserify и Reactify (я также слышал об использовании Webpack, но еще не пробовал). Эти модули позволяют вам писать такой код:
var Dispatcher = require(‘flux’).Dispatcher;
в ваши клиентские файлы JavaScript и преобразуйте их, чтобы правильно настроить зависимости для запуска в браузере. Они необходимы, потому что модуль Flux использует стиль модуля CommonJS, поэтому он должен быть «обязательным» во внешнем коде вашего проекта. Browserify преобразует эти операторы, а Reactify при включении в Browserify дополнительно преобразует JSX в React JavaScript.
Далее идут фактические компоненты, которые вам понадобятся для Flux. Паттерн Flux состоит из диспетчера, хранилищ, генератора событий и представлений. Изучив исходный код Flux-ToDoMVC, я обнаружил, что единственный код, представленный в модуле Flux, — это Dispatcher (как показано во фрагменте выше). Однако, чтобы использовать Flux в своем проекте, вам также потребуется позаимствовать из других модулей, чтобы сделать ваши магазины:
var EventEmitter = require(‘events’).EventEmitter; var assign = require(‘object-assign’);
Они используются для создания хранилищ в таком выражении:
var Store = assign({}, EventEmitter.prototype, {/* stuff */});
Чтобы использовать Flux, вам нужно прочитать еще многое, но это лишь некоторые из вещей, которые, как я обнаружил, были упущены/недостаточно упомянуты во всех руководствах, которые я читал. В остальном, чтение обзоров Flux (та же ссылка, что и выше) и чтение кода примера должно быть очень информативным.
