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

Почему вы должны подумать об использовании Redux?

Согласно официальному руководству (https://redux.js.org/)

«Redux помогает вам управлять «глобальным» состоянием — состоянием, которое необходимо во многих частях вашего приложения.

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

Какую проблему пытается решить Redux?

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

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

Каковы основные принципы Redux?

Позвольте мне объяснить это с помощью 3 концепций:

1. Один источник правды
Все переменные в приложении (данные, UI) находятся в одном состоянии (*дерево состояний/хранилище*)

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

1. Магазин:

Объект, содержащий все дерево приложения, имеет несколько режимов:

  • получить состояние ()
  • отправка (действие)
  • подписаться (слушатель)
  • replaceReducer (следующий редусер)

Подробнее о магазине и его методах мы поговорим позже.

Как создать свой редукционный магазин?

Передайте ваш основной редьюсер в createStore, как показано ниже:

const userReducer = function(state = [], action) {
  if (action.type === 'ADD_USER') {
    var newState = state.concat([action.user]);
    return newState;
  }
  return state;
}
const store = createStore(users, ['Use Redux'])
store.dispatch({
  type: 'ADD_USER',
  user: {name: 'Rawan', language: 'EN'}
})

[preloadedState]: этоначальное состояние приложения.

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

const action = {
  type: 'ADD_USER',
  user: {name: 'Rawan', language: 'EN'}
};

store.dispatch(action);

State-Tree доступен только для чтения, и единственный способ изменить статус (отправить данные из вашего приложения в ваш магазин Redux) — это отправить действие, например:
Что значит опубликовать действие?
Вы можете подумать о публикации таких действий, как «триггерное событие» в приложении.

Действие:

Четкий объект JS, описывающий изменение, с полем типа для указания типа действия, которое должно быть выполнено.
Поле жанра должно быть описательной единицей символов в формате «domain/eventName», похожем на «users/userLogin». ».

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

const userLoginAction = {
  type: 'users/USER_LOGIN',
   payload: {
    username: "Adam",
    password: "pass1234"
  }
}

Как видите, мы объявили экшен чем-то вроде жанра и пейлиста.

3. Изменения вносятся через чистые работы (Редукторы)

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

Чистая активность:
 – это функция, получающая одни и те же входные данные, которая всегда будет возвращать один и тот же эффект (состояние), а ее возвращаемое значение зависит только от значения ее параметров.
пример: если вы сдадите 1 и 4 в сводной задаче, вы всегда получите 5.

Кроме того, чистая работа не должна иметь таких негативных последствий, как:

Изменение ввода, сетевые вызовы, изменение файловой системы (fs), запрос DOM, установка таймера синхронизации, изменение некоторого статуса в автономном режиме или преобразование аргументов для работы, создание случайных чисел или случайных идентификаторов (таких как Matt. random () или Date.now ())… и т. д.

Reducer: дубликат принимает текущее состояние и объект действия в качестве аргументов и может изменить ситуацию, восстановив новое состояние.

и, как говорится в редукционных текстах:

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

У редукторов есть три важных правила:

  1. Только новое значение состояния должно быть рассчитано на основе государственных споров и действий.
  2. Им запрещено менять статус.
  3. Они могут делать только необратимые обновления, копируя существующий статус и внося изменения в скопированные значения. Они не должны выполнять никакой асинхронной логики, вычислять случайные значения или вызывать другие «неблагоприятные эффекты».

Как видите, правила смягчения аналогичны правилам чистой работы, но почему мы должны следовать этим правилам?

  1. Угадывая код, когда результат работы вычисляется только во входных аргументах, легко понять, как работает этот код, и протестировать его.
  2. Когда функция изменяет некоторые значения, включая их аргументы (текущее состояние, действие), это может неожиданно изменить способ работы приложения. Это может быть распространенным источником ошибок, таких как «Я обновил свой статус, но теперь мой пользовательский интерфейс не обновляется, когда должен!»
  3. Некоторая сила Redux DevTools зависит от того, правильно ли ваши ползунки следуют этим правилам.

вывод

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

Итак, вот окончательный вид,

Это обертка этой статьи,

Если вам понравилась эта статья, помогите мне купить кофе: https://www.buymeacoffee.com/harry1408

Суровый Патель | Полноценный разработчик | http://imharshpatel.com