С Redux мы можем использовать его для хранения данных в центральном месте нашего приложения JavaScript. Он может работать самостоятельно, а также является популярным решением для управления состоянием приложений React в сочетании с React-Redux.

В этой статье мы рассмотрим, как создать в приложении базовый магазин и использовать его.

Установка

Redux доступен как пакет NPM. Мы можем установить его, запустив:

npm install --save redux

с NPM или:

yarn add redux

с пряжей.

Базовый пример

Мы можем использовать redux для хранения состояния приложения, создав хранилище и редуктор.

Затем мы можем подписаться на магазин, чтобы получать данные и отправлять действия для внесения изменений в состояние.

Например, мы можем написать:

import { createStore } from "redux";
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + action.payload || 1;
    case "DECREMENT":
      return state - action.payload || 1;
    default:
      return state;
  }
}
let store = createStore(counter);
store.subscribe(() => console.log(store.getState()));
store.dispatch({ type: "INCREMENT", payload: 2 });
store.dispatch({ type: "DECREMENT", payload: 1 });

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

Функция counter проверяет тип действия INCREMENT и DECREMENT и возвращает новое состояние с добавленным к нему payload.

Затем мы создаем store, запустив:

let store = createStore(counter);

После этого мы можем подписаться на магазин, вызвав subscribe в магазине, а затем позвонив getState в обратном вызове для него следующим образом:

store.subscribe(() => console.log(store.getState()));

Затем мы можем отправлять действия в магазин, вызывая для него dispatch с объектом с type и payload, который будет передан в функцию counter в параметре action.

Следовательно, state будет обновлен action, поскольку для первого dispatch вызова:

store.dispatch({ type: "INCREMENT", payload: 2 });

type будет передан как action.type, а полезная нагрузка будет установлена ​​от action.payload до counter.

action.type равно ‘INCREMENT’, а action.payload равно 2.

Аналогично, action.type равно ‘DECREMENT’, а action.payload равно 1 во втором вызове.

Обратите внимание, что мы не изменяем состояние непосредственно в counter. Мы возвращаем новое состояние, выводя его из существующего состояния.

Три принципа Redux

К способу построения Redux применяются три принципа.

Единый источник истины

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

Благодаря этому также легко выполнять отладку. Это ускоряет разработку.

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

Состояние только для чтения

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

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

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

Изменения вносятся с помощью чистых функций

Редукторы - это чистые функции, которые принимают предыдущее состояние и действие и возвращают следующее состояние. Мы возвращаем новые объекты состояния вместо изменения предыдущего состояния.

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

Мы можем контролировать, как они вызываются, передавать дополнительные данные или создавать повторно используемые редукторы.

Архитектура потока

Redux концентрирует всю логику обновления модели на одном уровне приложения. Это одна из частей архитектуры Flux, которая была принята Redux.

У Redux нет диспетчера. Для изменения состояния он полагается на чистые функции, а не на эмиттеры событий.

Чистые функции легко создавать и не требуют дополнительного управления.

Redux предполагает, что мы никогда не изменяем наши данные. Мы всегда должны возвращать новые объекты. Теперь это просто, когда у нас есть оператор распространения для объектов.

RxJS

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

Например, мы можем написать:

import { createStore } from "redux";
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + action.payload || 1;
    case "DECREMENT":
      return state - action.payload || 1;
    default:
      return state;
  }
}
let store = createStore(counter);
function toObservable(store) {
  return {
    subscribe({ next }) {
      const unsubscribe = store.subscribe(() => next(store.getState()));
      next(store.getState());
      return { unsubscribe };
    }
  };
}
const counterObservable = toObservable(store);
counterObservable.subscribe({
  next(count) {
    console.log(count);
  }
});
store.dispatch({ type: "INCREMENT", payload: 2 });
store.dispatch({ type: "DECREMENT", payload: 1 });

В приведенном выше коде мы имеем:

function toObservable(store) {
  return {
    subscribe({ next }) {
      const unsubscribe = store.subscribe(() => next(store.getState()));
      next(store.getState());
      return { unsubscribe };
    }
  };
}
const counterObservable = toObservable(store);
counterObservable.subscribe({
  next(count) {
    console.log(count);
  }
});
store.dispatch({ type: "INCREMENT", payload: 2 });
store.dispatch({ type: "DECREMENT", payload: 1 });

toObservable возвращает Observable, на который мы можем подписаться, поскольку он возвращает метод subscribe.

Метод subscribe магазина Redux возвращает unsubscribe функцию, чтобы мы могли отписаться от нее, когда она нам больше не нужна.

Затем, когда мы вызовем dispatch выше, мы получим новые значения, зарегистрированные в next функции выше.

Заключение

Мы можем хранить данные приложения в центральном месте с помощью Redux. Для этого мы создаем магазин, а затем подписываемся на него, чтобы получать от него самое последнее состояние.

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

Примечание из JavaScript In Plain English

Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!

Мы также всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.