редукс

Контейнер состояния JavaScript, обеспечивающий предсказуемое управление состоянием. Состоянием, разделяемым несколькими компонентами в реагирующем приложении, можно управлять централизованно. Redux — это библиотека шаблонов и инструментов, которая использует события, называемые «действие», для управления и обновления состояния приложения.Он централизованно управляет состоянием, используемым во всем приложении, в централизованном хранилище (централизованном хранилище), а его правила гарантируют, что состояние может быть только Обновления предсказуемым образом.

Применение:

  • Состояние компонента должно быть доступно (разделено) другими компонентами в любое время.

  • Один компонент должен изменить состояние (связь) другого компонента.

Redux более полезен, когда:

  • В большом количестве мест в приложении присутствует большое количество состояний

  • Статус приложения часто обновляется с течением времени

  • Логика обновления этого состояния может быть сложной

  • Приложения среднего и большого размера кода, разработанные многими людьми

картина

действие

action — это простой объект JavaScript с typeполями . Вы можете думать о действиях как о событиях, описывающих то, что произошло в вашем приложении .

typeПоле представляет собой строку, дающую действию описательное имя, например "todos/todoAdded". Мы обычно пишем этот тип строки как «имя домена/события», где первая часть — это функция или категория, к которой принадлежит это действие, а вторая часть — то, что произошло.

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

Создатель действия — это функция, которая создает и возвращает объект действия. Что он делает, так это то, что вам не нужно вручную писать объект действия каждый раз


Редуктор

Редюсер — это функция, которая принимает текущий stateи actionобъект, решает, как обновить состояние при необходимости, и возвращает новое состояние. Сигнатура функции: (state, action) => newState. Вы можете думать о редюсере как о прослушивателе событий, который обрабатывает события в зависимости от типа получаемого им действия.

Редукторы должны соответствовать следующим правилам:

  • Рассчитать новые значения состояния, используя только параметры stateиaction

  • Прямая модификация запрещена state. Неизменяемые обновления должны выполняться путем копирования существующего stateи внесения изменений в скопированное значение .

  • Запретите любую асинхронную логику, код, основанный на случайных значениях или вызывающий другие «побочные эффекты».

Хранить

Состояние текущего приложения Redux находится в объекте с именем store .

Хранилище создается путем передачи редьюсера и getStateвызывает который возвращает текущее значение состояния.

В магазине Redux есть метод с именем dispatch. Единственный способ обновить состояние — вызвать store.dispatch()и передать объект действия . Хранилище выполнит все функции редуктора и вычислит обновленное состояние, которое getState()можно .

отправка действия может быть ясно понята как «запуск события» . Что-то произошло, и мы хотим, чтобы магазин знал об этом. Редюсеры действуют как прослушиватели событий, и когда они получают интересующее действие, они обновляют состояние в ответ.

const increment = () => {
return {
type: 'counter/increment'
}
}
store.dispatch(increment())
console.log(store.getState())








Функция Selector может извлечь указанный фрагмент из дерева состояний хранилища. По мере того, как приложение становится больше, вы будете сталкиваться с разными частями приложения, которым нужно читать одни и те же данные, селекторы могут избежать повторения такой логики чтения:


const selectCounterValue = state => state.value
const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2