Две базовые идеи в Redux
Прежде, чем начать изучение библиотеки Redux, давайте познакомимся с двумя ее базовыми идеями. Первую идею, касающуюся управления состоянием, мы рассмотрим на примере обычного счетчика на стейте в React:
function Counter() {
// State
const [count, setCount] = useState(0)
// Action:
function clickHandler() {
setCount(count + 1)
}
// View:
return (
<div>
<span>{count}</span>
<button onClick={clickHandler}>+</button>
</div>
)
}
В этом коде мы видим стейт
для переменной count - это
источник истины для счетчика. Затем мы видим
действие (action) - событие,
которое по клику пользователя вызывает
обновление стейта. И, наконец,
представление (view),
с помощью которого мы отображаем
пользовательский интерфейс.
Таким образом схема довольно проста:
кнопка нажимается - стейт count (State)
по нажатию (Action) изменяется, следовательно
изменяется представление (View) - в нашем случае
это число на экране.
Однако, все будет сложнее, если у нас множество компонентов, которые должны использовать один и тот же стейт. Можно, конечно, к примеру поднять состояние до родительских компонентов, но такое решение не всегда может избавить от проблемы. Redux в этом случае предлагает нам создать одно место в приложении, которое бы содержало глобальное состояние и определенные шаблоны поведения при обновлении этого состояния. Именно в этом и заключается первая базовая идея (!).
Вторая идея связана с иммутабельностью, то есть с неизменностью данных. Вы, конечно, помните из JavaScript, что массивы и объекты можно изменять. Изменение данных напрямую в Redux, как и в других фреймворках считается дурным тоном и может приводить к непредсказуемым последствиям. Поэтому в Redux наши первоначальные объекты и массивы должны оставаться иммутабельными, а изменять мы можем только их копии.
Расскажите, в чем заключается первая базовая идея Redux.
Расскажите, в чем заключается вторая базовая идея Redux.