<section id="description">
<p>Redux - это система управления состоянием (state), которая может использоваться с различными веб-технологиями, включая React. В Redux один объект состояния, который отвечает за все состояние вашего приложения. Это означает, что если у вас было приложение React с десятью компонентами, и каждый компонент имел свое собственное локальное состояние, то всё состояние вашего приложения было бы определено одним объектом состояния, размещенным в Redux <code>store</code> . Это первый важный принцип, который следует понимать при изучении Redux: хранилище Redux является единственным источником правды, когда дело касается состояния приложения. Это также означает, что в любое время, когда какая-либо часть вашего приложения хочет обновить состояние, она <strong>должна</strong> сделать это через хранилище Redux. Однонаправленный поток данных облегчает управление состоянием в вашем приложении.</p></section>

Create a Redux Store

<section id="description">
<p>У объекта хранилища Redux есть несколько методов, которые позволяют вам взаимодействовать с ним. Например, вы можете получить текущее состояние <code>state</code> , сохраненное в объекте хранилища Redux, с помощью метода  <code>getState()</code> .</p></section>

Get State from the Redux Store

<section id="description">
<p>Т.к. Redux - это фреймворк управления состоянием, то обновление состояния - одна из его главных задач. В Redux все обновления состояния срабатывают по диспетчерским действиям. Действие - это просто JavaScript объект, который содержит информацию о произошедшем событии. Хранилище Redux получает объекты действий, затем обновляет состояние, если нужно. Иногда Redux действие также содержит некоторую дополнительную информацию. Например, действие "сообщает" имя пользователя после успешного входа в систему. Действие обязательно должно содержать поле <code>type</code> , которое указывает "тип" исполняемого действия. Думайте о действиях Redux как о сообщениях, которые передают информацию о событиях, происходящих в вашем приложении, хранилищу Redux. Хранилище затем занимается обновлением состояния, на основании действия которое случилось.</p></section>

Define a Redux Action

<section id="description">
<p>После создания действия следующий шаг - отправление действия в хранилище Redux, чтобы обновить свое состояние. В Redux вы определяете создателей действий для завершения процесса. Создатель действия - это просто функция JavaScript, которая возвращает действие. Другими словами, создатели действий создают объекты, которые представляют события действия.</p></section>

Define an Action Creator

<section id="description">
<p>Метод <code>dispatch</code> - это то, что вы используете для отправки действий в хранилище Redux. Вызов <code>store.dispatch()</code> со значением, которое получено из создателя действия, посылает действие обратно в хранилище. Напомним, что создатель действия возвращает объект со свойством type, который определяет произошедшее действие. Потом метод отправляет объект действия в хранилище Redux. Основываясь на примере из предыдущего упражнения, следующие строки эквивалентны, и обе отправляют действие типа <code>LOGIN</code> : <blockquote>store.dispatch(actionCreator()); <br> store.dispatch({ type: 'LOGIN' });</blockquote></p>
</section>

Dispatch an Action Event

<section id="description">
<p>После того, как действие создано и отправлено, хранилище Redux должно знать, как реагировать на это действие. Это задача функции <code>reducer</code> . Редукторы в Redux отвечают за изменения состояния, которые происходят в ответ на действия. <code>reducer</code> принимает <code>state</code> и <code>action</code> в качестве аргументов и всегда возвращает новое <code>state</code> . Важно видеть, что это <strong>единственная</strong> роль редуктора. Он не имеет побочных эффектов - он никогда не вызывает конечную точку API (API endpoint) и никогда не имеет никаких скрытых сюрпризов. Редуктор - это просто чистая функция, которая принимает состояние и действие, а затем возвращает новое состояние. Другим ключевым принципом в Redux является то, что <code>state</code> доступно только для чтения. Другими словами, функция <code>reducer</code> должна <strong>всегда</strong> возвращать новую копию <code>state</code> и никогда не изменять состояние напрямую. Redux не обеспечивает неизменность состояния, однако вы несете ответственность за его выполнение в коде своих функций редуктора. Вы будете практиковать это в следующих упражнениях.</p></section>

Handle an Action in the Store

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

Use a Switch Statement to Handle Multiple Actions

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

Use const for Action Types

<section id="description">
<p>Другой метод, к которому у вас есть доступ из Redux <code>store</code>, - это <code>store.subscribe()</code> . Он позволяет вам подписать функции слушателя к хранилищу, которые будут вызываться всякий раз, когда действие отправляется в хранилище. Одним из простых способов использования этого метода является подписка функции на ваше хранилище, которая просто регистрирует сообщение каждый раз, когда принимается действие, и хранилище обновляется.</p></section>

Register a Store Listener

<section id="description">
<p>Когда состояние вашего приложения начинает становиться более сложным, может возникнуть соблазн разделить состояние на несколько частей. Вместо этого запомните первый принцип Redux: все состояние приложения хранится в одном объекте состояния в хранилище. Поэтому Redux предоставляет композицию редукторов как решение для сложной модели состояния. Вы определяете несколько редукторов для обработки разных частей состояния вашего приложения, а затем объединяете эти редукторы в один корневой редуктор. Корневой редуктор затем передается в метод Redux <code>createStore()</code> . Чтобы объединить несколько редукторов вместе, в Redux есть метод <code>combineReducers()</code> . Этот метод принимает объект как аргумент, в котором вы определяете свойства, которые связывают ключи с конкретными функциями редуктора. Имя, которое вы задаёте ключам, будет использоваться Redux как имя для связанной части состояния. Как правило, хорошей практикой является создание редуктора для каждой части состояния приложения, когда они являются особенными или уникальными в некотором роде. Например, в приложении для заметок с аутентификацией пользователя один редуктор может обрабатывать аутентификацию, а другой - текст и заметки, которые пользователь отправляет. Для такого приложения мы можем написать метод <code>combineReducers()</code> следующим образом: <blockquote> const rootReducer = Redux.combineReducers ({ <br> auth: authenticationReducer, <br> notes: notesReducer <br> }); </blockquote> Теперь ключ <code>notes</code> будет содержать все состояние, связанное с нашими заметками и обрабатываемое нашим <code>notesReducer</code> . Так можно создать несколько редукторов для управления более сложным состоянием приложения. В этом примере состояние, находящееся в хранилище Redux, будет тогда единственным объектом, содержащим свойства <code>auth</code> и <code>notes</code> .</p></section>

Combine Multiple Reducers

<section id="description">
<p>By now you've learned how to dispatch actions to the Redux store, but so far these actions have not contained any information other than a <code>type</code>. You can also send specific data along with your actions. In fact, this is very common because actions usually originate from some user interaction and tend to carry some data with them. The Redux store often needs to know about this data.</p></section>

Send Action Data to the Store

<section id="description">
<p>До сих пор эти проблемы избегали обсуждения асинхронных действий, но они являются неотъемлемой частью веб-разработки. В какой-то момент вам нужно будет вызывать асинхронные конечные точки в вашем приложении Redux, так как вы обрабатываете эти типы запросов? Redux обеспечивает промежуточное программное обеспечение, разработанное специально для этой цели, называемое промежуточным программным обеспечением Redux Thunk. Вот краткое описание того, как использовать это с Redux. Чтобы включить промежуточное ПО Redux Thunk, вы передаете его в качестве аргумента для <code>Redux.applyMiddleware()</code> . Затем этот оператор предоставляется в качестве второго необязательного параметра функции <code>createStore()</code> . Посмотрите на код внизу редактора, чтобы увидеть это. Затем, чтобы создать асинхронное действие, вы возвращаете функцию в создателе действия, который принимает <code>dispatch</code> в качестве аргумента. В рамках этой функции вы можете отправлять действия и выполнять асинхронные запросы. В этом примере асинхронный запрос моделируется с помощью вызова <code>setTimeout()</code> . Обычно перед отправкой какого-либо асинхронного поведения вы отправляете какое-либо действие, чтобы ваше состояние приложения знало, что запрашиваются некоторые данные (например, это состояние может отображать значок загрузки). Затем, как только вы получите данные, вы отправите другое действие, которое несет данные как полезную нагрузку вместе с информацией о завершении действия. Помните, что вы <code>dispatch</code> в качестве параметра этому создателю специальных действий. Это то, что вы будете использовать для отправки ваших действий, вы просто передаете действие непосредственно для отправки, а промежуточное ПО заботится обо всем остальном.</p></section>

Use Middleware to Handle Asynchronous Actions

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

Write a Counter with Redux

<section id="description">
<p>Эти заключительные проблемы описывают несколько способов обеспечения ключевого принципа неизменности состояния в Redux. Неизменяемое состояние означает, что вы никогда не изменяете состояние напрямую, вместо этого вы возвращаете новую копию состояния. Если вы взяли снимок состояния Redux приложения с течением времени, вы увидите что - то вроде <code>state 1</code> , <code>state 2</code> , <code>state 3</code> , <code>state 4</code> , <code>...</code> и так далее , где каждое состояние может быть аналогично последним, но каждый представляет собой отдельную часть данных. Эта непреложность, по сути, является тем, что обеспечивает такие функции, как отладка во время путешествия, о которой вы, возможно, слышали. Redux не активно применяет неизменность государства в своем магазине или редукторах, эта ответственность ложится на программиста. К счастью, JavaScript (особенно ES6) предоставляет несколько полезных инструментов, которые можно использовать для обеспечения неизменности вашего состояния, будь то <code>string</code> , <code>number</code> , <code>array</code> или <code>object</code> . Обратите внимание, что строки и числа являются примитивными значениями и неизменны по своей природе. Другими словами, 3 всегда 3. Вы не можете изменить значение числа 3. <code>array</code> или <code>object</code> , однако, являются изменяемыми. На практике ваше состояние, вероятно, будет состоять из <code>array</code> или <code>object</code> , поскольку они являются полезными структурами данных для представления многих типов информации.</p></section>

Never Mutate State

<section id="description">
<p>Одним из решений ES6, чтобы помочь обеспечить неизменность состояния в Redux, является оператор с расширением: <code>...</code> Оператор распространения имеет множество приложений, один из которых хорошо подходит для предыдущего вызова создания нового массива из существующего массива. Это относительно новый, но обычно используемый синтаксис. Например, если у вас есть массив <code>myArray</code> и напишите: <code>let newArray = [...myArray];</code> <code>newArray</code> теперь является клоном <code>myArray</code> . Оба массива все еще существуют отдельно в памяти. Если вы выполняете мутацию типа <code>newArray.push(5)</code> , <code>myArray</code> не изменяется. <code>...</code> эффективно <i>распространяет</i> значения в <code>myArray</code> в новый массив. Чтобы клонировать массив, но добавляя дополнительные значения в новый массив, вы можете написать <code>[...myArray, 'new value']</code> . Это вернет новый массив, состоящий из значений в <code>myArray</code> и строку <code>'new value'</code> в качестве последнего значения. Синтаксис распространения может использоваться несколько раз в составе массива, как это, но важно отметить, что он делает только мелкую копию массива. То есть он обеспечивает только неизменные операции массива для одномерных массивов.</p></section>

Use the Spread Operator on Arrays

<section id="description">
<p>Время практиковать удаление элементов из массива. Здесь также может использоваться оператор распространения. Другие полезные методы JavaScript включают <code>slice()</code> и <code>concat()</code> .</p></section>

Remove an Item from an Array

<section id="description">
<p>Последние несколько проблем работали с массивами, но есть способы помочь обеспечить неизменность состояния, когда государство тоже является <code>object</code> . Полезным инструментом для обработки объектов является <code>Object.assign()</code> . <code>Object.assign()</code> принимает объекты-объекты-объекты и исходные объекты и свойства карт из исходных объектов в целевой объект. Любые соответствующие свойства перезаписываются свойствами в исходных объектах. Это поведение обычно используется для создания мелких копий объектов путем передачи пустого объекта в качестве первого аргумента, за которым следует объект (ы), который вы хотите скопировать. Вот пример: <code>const newObject = Object.assign({}, obj1, obj2);</code> Это создает <code>newObject</code> как новый <code>object</code> , который содержит свойства, которые в настоящее время существуют в <code>obj1</code> и <code>obj2</code> .</p></section>