Основы Redux

Основы Redux что это такое и как с этим работать
Метки: / /

В этой статье вы прочитаете основы библиотеки Redux, но без React, как его объединить с ним посмотрим в одной из будущих статей.

Также посмотрите статью «Быстрый старт на React.js», в ней вы узнает основные принципы фреймворка React.

Что такое Redux:

Redux это специальная библиотека созданная для работы с данными в компании facebook.

Дело в том, что сам React и JS в частности не особо умеет работать с данными, и для удобства создали как раз Redux, более удобно работе с ними.

Ещё вам не обязательно его использовать с React.js, вы его вполне сможете использовать и с другими фреймворками, и даже на стороне сервера, на Node.js

Как установить Redux:

Теперь перейдём к установки Redux, установить его можно только через NPM:

Больше вы не как не установите его, также у вас должен быть bubel.

Принципе работы Redux:

Теперь разберём основные принципы работы с Redux, для наглядности я покажу вам такую схему:

Давайте внимательно посмотрим на схему и разберём что к чему у неё твориться, в начале мы вызываем Actions, например при нажатие кнопки.

Он в свою очередь отправляется в Reducer, он выполняет какое то действие и потом обновляет Store который содержит State, его выводим в интерфейс.

То есть если кратко говоря, то мы обновили State отправив Actions в Reducer, вот список что и для чего:

  • Action — Действие;
  • Reducer — Функция для изменения состояния;
  • Store — Главный объект который в себе всё содержит;
  • State — Состояние или данные;

Основы работы с Redux:

Теперь перейдём к работе с этой библиотеки, покажу вам не большой пример из официальной документации, ссылка ниже.

Сначала сделаем редюсер:

Давайте разберём из чего состоит редюсер, первое мы в него передаём базовое состояние и action, внутри же мы используем оператор switch который проверяет чему равен action.type, который в себе хранит тип действия виде обычной строки.

После того как проверит и зависимо от действия вернёт новое состояние state, если действия нет, то вернёт тикушие состояние.

Теперь нам нужно создать Store, делается это через функцию createStore(), в качестве параметра она принимает редюсер:

Теперь можем делать какие то действия, сам store в себе хранит три метода, вот они:

  • subscribe() — Используется при изменение state;
  • getState() — Получает State;
  • dispatch() — Вызывает Action;

Давайте теперь рассмотрим полноценную работу со всем этим, вот не большой код:

В начале мы запустили subscribe() которая будет выводить в консоль браузера состояние когда он измениться, потом вызываем три раза dispatch(), сначала инкремент, потом один раз декремент, и того конечный результат будет {value: 0}.

В целом как видите всё очень просто, но ещё стоит упомянуть в action параметр payload, дело в том, что вам иногда надо будет передать какие либо данные для state, и для этого в объекте action используете этот параметр.

Вот вам не большой пример кода используя его:

Как видите мы тут изменили редюсер, теперь к state мы будем добавлять не просто единицу а какое то число, но теперь мы для action для удобства мы сделаем функцию, которая будет возвращать объект с type и payload.

Вот пример этого:

То есть мы payload назначаем из параметра который передали в функцию, теперь её можем передать в dispatch(), примерно так:

Для старта и чтобы делать простые задачи с Redux, вам этого хватит.

Вывод:

В этой статье вы прочитали про основы Redux, в целом всё просто, но в будущем будет ещё больше статьей на эту тему.

Подписываетесь на соц-сети:

Поделится:

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии