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

Для получения информации, которая является глобальной для всех ваших «тупых» компонентов, вы можете использовать контексты реакции.

// redux aware component
var ChatApp = React.createClass({
  childContextTypes: {
    language: React.PropTypes.string
  },
  getChildContext: function() {
    // or pull from your state tree
    return {language: "en"};
  },
  ...
}

// dumb components
var ExDumb = React.createClass({
  contextTypes: {
    language: React.PropTypes.string
  },

  render: function() {
    var lang = this.context.language;
    return ( <div /> );
   }
 });

В ответ на комментарии Redux использует этот контекстный подход. в своей библиотеке react-redux.

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

(ОБНОВЛЕНИЕ: потратив некоторое время на вариант 4, я лично считаю, что это правильный путь. Я опубликовал библиотеку, react-redux -controller, построенный на основе этого подхода.)

Есть несколько подходов, о которых я знаю, от получения данных от вашего корневого компонента до конечных компонентов через ветви в середине.

Цепочка реквизитов

Документы Redux в контексте использования react-redux, предложить передачу данных по всей цепочке ветвей через props. Я не одобряю эту идею, потому что она связывает все компоненты промежуточной ветви с любой сегодняшней структурой приложения. С другой стороны, ваш код React будет довольно чистым и связан с самим Redux только на верхнем уровне.

Селекторы во всех компонентах

В качестве альтернативы вы можете использовать connect, чтобы сделать данные из вашего хранилища Redux доступными, независимо от того, где вы находитесь в дереве компонентов. Это отделяет ваши компоненты друг от друга, но связывает все с Redux. Я хотел бы отметить, что главный автор Redux не обязательно против такого подхода. И это, вероятно, более производительно, так как предотвращает повторный рендеринг промежуточных компонентов из-за изменений в props, о которых они на самом деле не заботятся.

Реакция children

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

Реагировать на контекст

Как впервые упомянул @mattclemens, вы можете использовать экспериментальный context API, чтобы отделить ваши промежуточные компоненты. Да, это "экспериментальный". Да, команда React определенно не в восторге от этого. Но имейте в виду, что это именно то, что connect Redux использует для внедрения dispatch и реквизитов из селекторов.

Я думаю, что это обеспечивает хороший баланс. Компоненты остаются несвязанными, потому что компонентам ветвей не нужно заботиться о зависимостях потомков. Если вы используете только connect в корне для настройки контекста, то всем потомкам нужно только подключить контекстный API React, а не Redux. Компоненты можно свободно переставлять, если какой-то предок устанавливает требуемые context свойства. Если единственным компонентом, который устанавливает context, является корневой компонент, это тривиально верно.

Команда React сравнивает использование context с глобальными переменными, но это кажется преувеличением. Мне это больше похоже на инъекцию зависимостей.