Краткое руководство по Redux для начинающих

kratkoe rukovodstvo po redux dlya nachinayushhih

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Redux — это менеджер состояния, обычно используемый вместе с React. Он не привязан к этой библиотеке и может использоваться с другими технологиями. Но мы останемся на React ради этой статьи.

React имеет собственный способ управления состоянием, и вы можете прочитать мое вступление в управление состоянием в React в моем руководстве для начинающих React.

В этой статье я не упомянул о подходе, который я обсуждал не масштабируется.

Перемещение состояния вверх в дереве работает в простых случаях, но в сложной программе можно обнаружить, что перемещаете почти все состояние вверх и вниз с помощью реквизитов. Лучшим подходом было бы использовать an внешний глобальный магазин.

Redux – это способ управления состоянием программы.

Нужно понять несколько концепций, но как только вы поймете их, Redux станет очень простым подходом к проблеме.

Снова отмечу: Redux очень популярен среди приложений React, но он не уникален для React. Есть привязки практически к каждому популярному фреймворку. Тем не менее, я поделюсь несколькими примерами использования React, поскольку он очень распространен.

Когда следует использовать Redux?

Redux идеально подходит для средних и больших программ. Вы должны использовать его только тогда, когда у вас есть проблемы с управлением состоянием с помощью стандартного управления состоянием React (или любой другой библиотеки, которую вы используете).

Простым программам это вообще не нужно (и в простых программах нет ничего дурного).

Неизменное дерево состояния

В Redux все состояние программы представлено один Объект JavaScript, вызываемый состояние или государственное дерево.

Мы это называем неизменное дерево состояний поскольку он доступен только для чтения: его нельзя изменить напрямую.

Его можно изменить, только отправив Действие.

Действия

Ан Действие есть объект JavaScript, который минималистически описывает изменения (только с необходимой информацией):

{   type: 'CLICKED_SIDEBAR' } 
// e.g. with more data {   type: 'SELECTED_USER',   userId: 232 }

Единственным требованием к объекту действия является наличие a type свойство, значением которого обычно является строка.

Типы действий должны быть постоянными

В простой программе тип действия можно определить как строчку (как я сделал в примере в предыдущей статье).

Когда приложение растет, лучше использовать константы:

const ADD_ITEM = 'ADD_ITEM' const action = { type: ADD_ITEM, title: 'Third item' }

и разделить действия в своих файлах и импортировать их:

import { ADD_ITEM, REMOVE_ITEM } from './actions'

Создатели действий

Создатели действий это функции, создающие деяния.

function addItem

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *