Возможно, вы уже слышали о Redux и знаете, что он обычно используется с React, как и я, но не знаете, что это такое и с чего начать? Что ж, тогда вы попали в нужное место. В этом кратком чтении я объясню основы, которые вам нужно знать о Redux, чтобы вы могли применить его в своем следующем приложении JavaScript! Сохраняйте спокойствие и читайте дальше, потому что Redux определенно не такой сложный, как вы думаете.

Определение

Проще говоря, Redux — это библиотека управления состоянием для приложений JavaScript, которая позволяет приложениям:

  • Ведите себя предсказуемо благодаря синхронизированному потоку данных
  • Наличие централизованного состояния и логики приложения
  • Быть легко отлаживаемым, сообщая вам, когда, где, почему и как изменилось состояние вашего приложения с помощью Redux DevTool

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

Три столпа Redux

Магазин

  • В Redux есть единственный объект JavaScript, называемый store, который в основном хранит все состояния приложения, действуя как база данных для внешнего интерфейса вашего приложения. Важно отметить, что с этой единой центральной системой хранения различным компонентам пользовательского интерфейса больше не нужно будет поддерживать свои собственные состояния, что эффективно решает проблему постоянной необходимости синхронизации данных между компонентами.

Действия

  • Действия — это объекты JavaScript, представляющие то, что произошло (т. е. произошедшие события).
  • Они должны иметь свойство type, указывающее тип выполняемого действия, и должны быть определены как строки, поскольку они более наглядны, чем, скажем, целые числа.
  • Помимо типа, структура объекта действия просто произвольна.
{
   type: "ACTION_TYPE", /* type required */
   arbitrary: "Hello World!"
}

Редукторы

  • Редукторы указывают, как должны обновляться состояния, подобно тому, как обработчики событий обрабатывают события.
  • Это чистые функции, которые не изменяют состояния или аргументы, что не приводит к побочным эффектам. Этот момент особенно важен, потому что для этого требуется понять, что значит вернуть совершенно новый объект, который не приведет к какой-либо мутации исходного объекта в хранилище — точка борьбы для многих людей. Например, создание поверхностной копии по сравнению с глубокой копией объекта и изменение его для возврата в обновленном состоянии. Здесь мы хотим вернуть измененную глубокую копию объекта (т. е. последнюю, а не первую).
  • Они принимают два аргумента, предыдущее состояние и действие, и возвращают новое обновленное состояние.

Установка Редукса

npm install redux

Создание редуктора

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

  • Первоначальный вызов редюсера будет в неопределенном состоянии, поэтому крайне важно, чтобы вы установили его начальное состояние. В ES6 вы можете использовать синтаксис аргументов по умолчанию, чтобы написать это компактно, как показано ниже.
  • Чтобы вернуть текущее состояние в случае переключателя по умолчанию
function reducer(state = initialState, action) {
    switch (action.type) {
        case ACTION_1:
           /* Return a new state */
        default:
           return state
    }
}

Создание магазина

import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)

Результирующий объект хранилища будет иметь следующие свойства, все из которых являются функциями:

  • отправка: отправка (действие)
  • подписаться: подписаться (слушатель)

Подписка на магазин позволяет получать уведомления при изменении состояния. Это делает компоненты пользовательского интерфейса естественными подписчиками на хранилище, поскольку они будут обновляться (перерисовываться) каждый раз при изменении состояния. Обратите внимание, что subscribe() также возвращает функцию для отмены регистрации прослушивателя, а компоненты пользовательского интерфейса, которые в данный момент не видны, например, могут вызывать эту функцию для отказа от подписки на прослушиватель.

const unsubscribe = store.subscribe( () => {...} )
// Stop listening to state updates
unsubscribe()
  • получить состояние: получить состояние ()
  • replaceReducer: replaceReducer (следующий редусер)
  • Символ (наблюдаемый): наблюдаемый ()

Обратите внимание, что нет функции setState, потому что хранилище доступно только для чтения. Чтобы обновить состояние хранилища, необходимо отправить действие, которое затем будет обработано редьюсером, чья работа заключается в соответствующем обновлении состояния.

И это все для основы! Понимание этих трех столпов — это действительно все, что вам нужно знать, чтобы начать работу с Redux. Для получения дополнительной информации вы можете ознакомиться с официальной документацией здесь: redux.js.org/introduction/getting-started

P.S. Интересуетесь React Hooks? Вы можете ознакомиться с другой моей статьей о хуках здесь