<section id="description">
<p>Эта серия проблем знакомит с использованием Redux с React. Во-первых, рассмотрим некоторые ключевые принципы каждой технологии. Реагирование - это библиотека представлений, которую вы предоставляете с данными, а затем рендерит представление эффективным и предсказуемым образом. Redux - это система управления состоянием, которую вы можете использовать для упрощения управления состоянием вашего приложения. Как правило, в приложении React Redux вы создаете одно хранилище Redux, которое управляет состоянием всего вашего приложения. Ваши компоненты React подписываются только на части данных в магазине, которые имеют отношение к их роли. Затем вы отправляете действия непосредственно из компонентов React, которые затем запускают обновления магазина. Хотя компоненты React могут управлять своим собственным состоянием локально, когда у вас сложное приложение, обычно лучше поддерживать состояние приложения в одном месте с помощью Redux. Существуют исключения, когда отдельные компоненты могут иметь локальное состояние, специфичное только для них. Наконец, поскольку Redux не предназначен для работы с React из коробки, вам нужно использовать пакет <code>react-redux</code> . Он предоставляет вам возможность передать <code>state</code> Redux и <code>dispatch</code> ваши компоненты React в качестве <code>props</code> . В следующих нескольких задачах, во-первых, вы создадите простой компонент React, который позволит вам вводить новые текстовые сообщения. Они добавляются в массив, который отображается в представлении. Это должен быть хороший обзор того, что вы узнали на уроках React. Затем вы создадите хранилище Redux и действия, управляющие состоянием массива сообщений. Наконец, вы будете использовать <code>react-redux</code> для подключения хранилища Redux к вашему компоненту, тем самым извлекая локальное состояние в хранилище Redux.</p></section>

Getting Started with React Redux

<section id="description">
<p>Здесь вы закончите создание компонента <code>DisplayMessages</code> .</p></section>

Manage State Locally First

<section id="description">
<p>Теперь, когда вы закончили компонент React, вам нужно переместить логику, которую она выполняет локально в своем <code>state</code> в Redux. Это первый шаг для подключения простого приложения React к Redux. Единственная функциональность вашего приложения - это добавить новые сообщения от пользователя в неупорядоченный список. Пример прост, чтобы продемонстрировать, как React и Redux работают вместе.</p></section>

Extract State Logic to Redux

<section id="description">
<p>В последней задаче вы создали хранилище Redux для обработки массива сообщений и создали действие для добавления новых сообщений. Следующим шагом будет предоставление доступа React к хранилищу Redux и действия, необходимые для отправки обновлений. React Redux предоставляет пакет <code>react-redux</code> для выполнения этих задач. React Redux предоставляет небольшой API с двумя ключевыми функциями: <code>Provider</code> и <code>connect</code> . Другая проблема <code>connect</code> . <code>Provider</code> - это оболочка из React Redux, которая обертывает ваше приложение React. Затем этот обертку позволяет вам получить доступ к функциям <code>store</code> Redux и функции <code>dispatch</code> во всем дереве компонентов. <code>Provider</code> берет два реквизита, магазин Redux и дочерние компоненты вашего приложения. Определение <code>Provider</code> для компонента приложения может выглядеть так: <blockquote> &#x3C;Магазин-провайдер = {store}> <br> &#x3C;Приложение /> <br> &#x3C;/ Provider> </blockquote></p>
</section>

Use Provider to Connect Redux to React

<section id="description">
<p>Компонент <code>Provider</code> позволяет вам предоставлять <code>state</code> и <code>dispatch</code> ваши компоненты React, но вы должны точно указать, какое состояние и действия вы хотите. Таким образом, вы убедитесь, что каждый компонент имеет доступ только к состоянию, в котором он нуждается. Вы достигаете этого, создавая две функции: <code>mapStateToProps()</code> и <code>mapDispatchToProps()</code> . В этих функциях вы объявляете, какие части состояния вы хотите иметь доступ и какие создатели действий вы должны иметь возможность отправлять. После того, как эти функции находятся в месте, вы увидите , как использовать Реагировать Redux <code>connect</code> метод , чтобы соединить их к компонентам в другом вызове. <strong>Примечание.</strong> За кулисами React Redux использует метод <code>store.subscribe()</code> для реализации <code>mapStateToProps()</code> .</p></section>

Map State to Props

<section id="description">
<p>Функция <code>mapDispatchToProps()</code> используется для предоставления конкретным создателям действий вашим компонентам React, чтобы они могли отправлять действия против магазина Redux. Он похож по структуре на <code>mapStateToProps()</code> вы написали в последнем вызове. Он возвращает объект, который сопоставляет действия отправки с именами свойств, которые становятся компонентами <code>props</code> . Однако вместо возврата части <code>state</code> каждое свойство возвращает функцию, которая вызывает <code>dispatch</code> с создателем действия и любыми соответствующими действительными данными. У вас есть доступ к этой <code>dispatch</code> потому что она передается в <code>mapDispatchToProps()</code> в качестве параметра, когда вы определяете функцию, точно так же, как вы передали <code>state</code> <code>mapStateToProps()</code> . За кулисами React Redux использует <code>store.dispatch()</code> Redux для <code>store.dispatch()</code> этих рассылок с помощью <code>mapDispatchToProps()</code> . Это похоже на то, как он использует <code>store.subscribe()</code> для компонентов, которые отображаются в <code>state</code> . Например, у вас есть создатель действия <code>loginUser()</code> который принимает <code>username</code> в качестве полезной нагрузки. Объект, возвращенный из <code>mapDispatchToProps()</code> для этого создателя действия, будет выглядеть примерно так: <blockquote> { <br> submitLoginUser: function (username) { <br> отправка (loginUser (имя пользователя)); <br> } <br> } </blockquote></p>
</section>

Map Dispatch to Props

<section id="description">
<p>Теперь, когда вы написали функции <code>mapStateToProps()</code> и <code>mapDispatchToProps()</code> , вы можете использовать их для отображения <code>state</code> и <code>dispatch</code> в <code>props</code> одного из ваших компонентов React. Метод <code>connect</code> из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: <code>mapStateToProps()</code> и <code>mapDispatchToProps()</code> . Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к <code>state</code> но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: <code>connect(mapStateToProps, mapDispatchToProps)(MyComponent)</code> <strong>Примечание.</strong> Если вы хотите опустить один из аргументов метода <code>connect</code> , вы передаете <code>null</code> на свое место.</p></section>

Connect Redux to React

<section id="description">
<p>Теперь, когда вы понимаете, как использовать <code>connect</code> для подключения React к Redux, вы можете применить то, что вы узнали, к своему компоненту React, который обрабатывает сообщения. В последнем уроке компонент, который вы подключили к Redux, был назван <code>Presentational</code> , и это не было произвольным. Этот термин <i>обычно</i> относится к компонентам React, которые напрямую не связаны с Redux. Они просто отвечают за представление пользовательского интерфейса и делают это в зависимости от реквизита, который они получают. Напротив, компоненты контейнера подключены к Redux. Обычно они отвечают за отправку действий в хранилище и часто передают состояние хранилища дочерним компонентам в качестве реквизита.</p></section>

Connect Redux to the Messages App

<section id="description">
<p>Вы почти закончили! Напомним, что вы написали весь код Redux, чтобы Redux мог контролировать управление вашим приложением React messages. Теперь, когда Redux подключен, вам нужно извлечь управление состоянием из компонента <code>Presentational</code> и в Redux. В настоящее время вы подключены к Redux, но вы управляете состоянием локально в составе <code>Presentational</code> компонента.</p></section>

Extract Local State into Redux

<section id="description">
<p>Поздравляем! Вы закончили занятия по Реакту и Редьюксу. Перед тем, как двигаться дальше, нужно указать один последний предмет. Как правило, вы не будете писать приложения React в редакторе кода, как это. Эта задача дает вам представление о том, как выглядит синтаксис, если вы работаете с npm и файловой системой на своей собственной машине. Код должен выглядеть аналогично, за исключением использования операторов <code>import</code> (они охватывают все зависимости, которые были предоставлены вам в задачах). Раздел «Управление пакетами с номером npm» охватывает npm более подробно. Наконец, для написания кода React и Redux обычно требуется некоторая конфигурация. Это может быстро усложниться. Если вы заинтересованы в экспериментировании на своей собственной машине, <a id="CRA" target="_blank" href="https://github.com/facebookincubator/create-react-app">приложение Create React</a> будет настроено и готово к работе. Кроме того, вы можете включить Babel в качестве препроцессора JavaScript в CodePen, добавить React и ReactDOM в качестве внешних ресурсов JavaScript и работать там.</p></section>