#1 Redux JS - Вступление

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

Итак redux - это предсказуемый контейнер состояния для javascript приложений. Он учит думать о приложении, как о начальном состоянии, которое изменяется последовательностью действий. И я, как и много других людей, считаю его очень хорошим подходом для javascript приложений.

Мы с вами будем рассматривать его вместе с react, так как они отлично сочетаются. React отвечает только за view слой в приложении, а redux хранение данных и работу с ними.

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

Для начала давайте установим redux в наш проект.

npm install redux --save --save-exact

Закомментируем пока содержимое файла index.js. И импортируем createStore из пакета redux.

import { createStore } from 'redux';

И попробуем создать store приложения.

const store = createStore();

Store - это наше хранилище всех данных в приложении. Любые данные, мы будем хранить в этом обьекте.

Если мы посмотрим в браузер, то увидим ошибку.

createStore.js:69 Uncaught Error: Expected the reducer to be a function.

Это потому, что на вход функции createStore нужно передать функцию, которая будет изменять наш store.

Допустим у нас будет приложение, которое работает с треками и плейлистами.

function playlist(state = []) {
  return state;
}

const store = createStore(playlist);

Мы добавили функцию playlist, которая на вход получает state с дефолтным значением и возвращает его. Как мы видим, в браузере пропали ошибки и мы можем использовать наш store.

И первое, что нас интересует - это как выглядит наш store. Давайте законсолим его.

console.log(store.getState());

И сейчас это у нас пустой массив.

Теперь нас интересует, как нам подписаться на изменение нашего store, чтобы знать, что у нас изменились данные в нем. Очень просто. Для этого у стора есть subscribe метод.

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

Мы вызываем store.subscribe и передаем в него callback, который выстрелит, если у нас поменяется значение в store. И чтобы видеть, на какое значение оно поменяется, мы консолим store.getState.

Теперь давайте поменяем наше значение в store. В этом нам поможет функция dispatch. Это единственный способ поменять значение в store.

store.dispatch({ type: 'ADD_TRACK', payload: 'Smells like spirit' });

Функция dispatch принимает на вход обьект и единственное, но обязательное - это поле type. Собственно, dispatch - это action, то есть событие, а type - это тип этого события. В данном случае событие добавить трек. В поле payload содержатся данные.

Это еще не все, так как мы выстрелили action, но не отреагировали на него в нашей функции playlist. Давайте законсолим action в этой функции, который идет вторым аргументом.

function playlist(state = [], action) {
  console.log(action);
  return state;
}

Если мы посмотрим в браузер, то мы увидим 2 обьекта. Первый с типом @@redux/INIT, это событие, которые стреляет, когда redux инициализирован. Второй обьект - это как раз наш action. И мы видим в нем наш type и payload.

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

function playlist(state = [], action) {
  if (action.type === 'ADD_TRACK') {
    return [
      ...state,
      action.payload
    ]
  }
  return state;
}

Как вы видите, я тут использовал оператор spread из es7, чтобы добавить значение в массив и вернуть новый массив. Это очень важно, так как наш стор иммутабельный, и это значит, что мы можем только создавать новую копию данных, а не менять старое состояние store. Это делает работу с данными очень просто и гибкой.

Если мы посмотрим в браузер, то увидим, что у нас вывелся наш измененый store с одной записью. Давайте попробуем добавить еще один трек в плейлист.

store.dispatch({ type: 'ADD_TRACK', payload: 'Enter Sandman' });

В браузере у нас отображается 2 массива, с одной записью и с двумя записями. То есть мы по шагам можем видеть, как меняется store при применении екшенов.

Давайте еще раз пройдем по тому, что мы сделали

1. Создали новый store для нашего приложения
2. Передали в него функцию, которая получает екшены и меняет store
3. Подписались на изменения store с помощью функции subscribe
4. Выстрелили action с данными
5. Функция playlist меняет данные с store
6. Теперь в callback функции subscribe мы всегда знаем, как выглядит наш стор и можем что-то перерисовать на странице.

Но об этом мы поговорим в следующем уроке.