Выезд Facebook’ с Получение Started ⁵ руководство .

Flux

Flux ⁶ является Архитектурный pattern по Facebook рекомендуется для создания приложений с React.В то время как React’ з мнений nudge Вы к однонаправленным потоком данных, поток обеспечивает более полную картину относительно того, что, что actually выглядит.Несколько Flux реализации возникли (LeanKit’ с lux.js ⁷ , входит в комплект), обеспечивая захватывающее представление о том, как разные команды решают стоящие перед ними задачи.Резюме высокого уровня Flux будет включать:

• Flux приложения имеют три основные абстракции: вид (Реагировать компоненты), магазины и диспетчер .
• Просмотров “ propagate” действия (например, взаимодействие с пользователем) через диспетчер .
• Диспетчер обрабатывает уведомления различные магазины действия .
• Если store’ изменяется состояние, он испускает событие изменения, и вид в зависимости от этого магазина для государства будет rerender .

Выезд Facebook’ ы | __24 обзор Flux __26 | | 8__7 .

Разработчики JavaScript провернуть новые рамки, как быстро, как политик делает обещания на предвыборном митинге.Почему же тогда, написать еще рамки?Я люблю эту тему, хотя это выходит за рамки данной статьи. Lux.js ⁹ является реализация Flux architecture использованием Реагировать;we’ ве учетом его под наш team’ специфичный набор потребностей, навыков и целей.На самом деле, наша работа с лк пытается тонкий баланс между последовательных мнений и гибкости, чтобы включить другие библиотеки, которые лучше всего решать проблему в руки .

Со временем, при отсутствии и успеха в очень немногих проектов, we’ ве нашли следующие качества, чтобы быть драйверы успеха в нашей собственной реализации потока:

1. Don’ т получить в React’ S способ .
2. Постоянно устранить макет .
3. Обращайтесь с каждым вход как действие .
4. Операции магазин must синхронными .
5. Сделать это легко играть хорошо с не-люкс / не реагировать случаи .

Examples

Дмитрий Voronianski создано потока comparison __64 | | 10__7 , которая позволяет увидеть бок о бок comparison нескольких потоков вариантов (используя базовый торговый пример ВОЗ).I’ ве реализован тот же пример с использованием люкс, чтобы проиллюстрировать объяснения по пути.Я очень рекомендую проверить этот проект из — it’ са отличный способ быстро ознакомиться с несколькими ведущими Flux реализации .

var CartContainer = lux.controllerView({

  getActions: [ "cartCheckout" ],

  stores: {
    listenTo: [ "cart" ],
    onChange: function() {
      this.setState(getStateFromStores());
    }
  },

  getInitialState: function () {
    return getStateFromStores();
  },

  onCheckoutClicked: function () {
    var products = this.state.products;
    if (!products.length) {
      return;
    }
    this.cartCheckout(products);
  },

  render: function () {
    return (
      <Cart products={this.state.products} total={this.state.total} onCheckoutClicked={this.onCheckoutClicked} />
    );
  }
});

var CartContainer = React.createClass({

  mixins: [ lux.reactMixin.store, lux.reactMixin.actionCreator ],

  getActions: [ "cartCheckout" ],

  stores: {
    listenTo: [ "cart" ],
    onChange: function() {
      this.setState(getStateFromStores());
    }
  },

  // other methods, etc.
});

// Taken from the facebook-flux example:
// https://github.com/voronianski/flux-comparison/blob/master/facebook-flux/js/components/CartContainer.jsx
var CartContainer = React.createClass({
  // only showing the methods we're interested in

  componentDidMount: function () {
    CartStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function () {
    CartStore.removeChangeListener(this._onChange);
  },

  // more methods, etc.
});

var ProductsListContainer = React.createClass({

  mixins: [ lux.reactMixin.store ],

  stores: {
    listenTo: [ "products" ],
    onChange: function() {
      this.setState(getAllProducts());
    }
  },

  // more methods, etc.
});

// snippet from: https://github.com/voronianski/flux-comparison/blob/master/facebook-flux/js/actions/ActionCreators.js
var ActionsCreators = exports;

ActionsCreators.receiveProducts = function (products) {
  AppDispatcher.handleServerAction({
    type: ActionTypes.RECEIVE_PRODUCTS,
    products: products
  });
};

ActionsCreators.addToCart = function (product) {
  AppDispatcher.handleViewAction({
    type: ActionTypes.ADD_TO_CART,
    product: product
  });
};

Как мы регулярно спросил, что повторное код, который мы могли бы устранить и заменить конвенции, ActionCreator интерфейсы подходили.В нашем случае, мы используем postal.js ¹¹ для связи между ActionCreators и диспетчера (почтовый является библиотека шины сообщений в памяти, обеспечивая передовые публикации / подписки функциональность).99,9% времени, метод ActionCreator опубликовал сообщение действий без дополнительного поведения.Вещи развивались с течением времени, как это:

// The very early days
// `actionChannel` is a ref to a postal channel dedicated to lux Actions
var ActionCreators = {
  addToCart: function() {
    actionChannel.publish( {
      topic: "execute.addToCart",
      data: {
        actionType: ActionTypes.ADD_TO_CART,
        actionArgs: arguments
      }
    } );
  }
};

Это было очень быстро абстрагироваться в ActionCreator примесь для того, чтобы это:

// The early-ish days
var ActionCreators = lux.actionCreator({
  addToCart: function( product ) {
    this.publishAction( ActionTypes.ADD_TO_CART, product );
  }
});

| You__32 заметите две вещи в коде выше: во-первых, использование lux.actionCreator, который смешивает lux.mixin.actionCreator в цель;во-вторых, publishAction Метод (предоставляется примесь) .

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

var ProductStore = new lux.Store( {

  state: { products: [] },

  namespace: "products",

  handlers: {
    addToCart: function( product ) {
      var prod = this.getState().products.find( function( p ) {
          return p.id === product.id;
      } );
      prod.inventory = prod.inventory > 0 ? prod.inventory - 1 : 0;
    }
  },

  // other methods, etc.
} );

Имена типа соответствия действий и имена обработчиков магазин сделал обычный провод планом очень просто, но мы видели другую область, где мы могли бы устранить макет: если 99% наших реализаций API ActionCreator только что опубликовал сообщение, то почему бы не вывести создание ActionCreator API, основанныйна то, что получает обрабатываются магазинах?Так мы и сделали, в то время как все еще позволяя пользовательские реализации методов ActionCreator где это необходимо.Например, когда экземпляр магазин в фрагменте выше создается, люкс увидите, что он работает в addToCart действия.Если ActionCreator API hasn’ т уже определены для этой деятельности в рамках lux.actions, люкс будет создать, с поведением по умолчанию опубликования сообщение действий .

Принимая этот подход означает, что наши компоненты могут указать, чтоМетоды ActionCreator они хотят в а-ля-карт стиле.В следующем фрагменте, наша ProductItemContainer использует lux.reactMixin.actionCreator подмешать, которая ищет getActions массив, и предоставляет указанные действия как методы на высшем уровне по компоненту.Вы можете увидеть we’ Re используя addToCart метод ActionCreator в onAddToCartClicked метода обработчика .

var ProductItemContainer = React.createClass({

  mixins: [ lux.reactMixin.actionCreator ],

  getActions: [ "addToCart" ],

  onAddToCartClicked: function () {
    this.addToCart(this.props.product);
  },

  render: function () {
    return (
      <ProductItem product={this.props.product} onAddToCartClicked={this.onAddToCartClicked} />
    );
  }
});

Как с любой конвенции, есть компромиссы.Состав является важным аспектом ActionCreator API.Они должны быть смоделированы отдельно от компонента (ов) , что использовать их.Пока мы считаем, что подход поддерживает, что, в то время как торговля некоторые из явного характера (например, сохраняя ActionCreators в своем собственном модуле) для гибкости и лаконичностью .

Все ли Action

Так как это поведение обеспечивая ActionCreator API, была отведена в примесь, он сделал это возможным для обоих Реагировать компонентов, а также не-люкс / Реагировать экземпляров использовать подмешать.Моя команда была пользуясь этим, когда дело доходит до вещей, как удаленных интерфейсов передачи данных.We’ Re используя гипермедиа клиента под названием halon ¹² , который понимает, как потреблять наши гипермедиа ресурсы, используя расширенную версию HAL ^{13 | __13 (гипермедиа приложений Язык, открытая спецификация для определения структуры HTTP ресурсов).Покрытие гипермедиа выходит за рамки данной статьи, но количество good 14 resources 15 exist 16 если you’ заинтересованы в получении дополнительной информации.Наш клиент-сторона обертка для хладона использует lux’ S actionCreator и actionListener Mixins так, что он может не только публиковать действия, но также обрабатывать их .}

Мы подходим это так, потому что мы считаем, каждые input — будь то вход пользователя или очередь асинхронное выполнение (с помощью Ajax, PostMessage, WebSockets, и т.д.) — должны быть поданы в качестве клиента action.Если you’ ве ногу с любой из Реагировать обсуждений в течение долгого времени, Вы могли бы думать, “ Джим, Facebook ОК с вызовом отправки непос …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров