#2 Redux JS - отрисовываем елементы из store

Всем привет. Как в комментариях правильно указали по русски правильно называть библиотеку редакс а не редукс. Поэтому в этом уроке мы продолжаем разбираться с редаксом. И сегодня мы добавим форму, которая будет выводить список наших треков.

Добавим в html разметку базовую форму добавления треков в список. Добавим input для ввода треков, кнопку добавление трека и контейнер для списка треков.

<div>
  <input type="text" class="trackInput"/>
  <button class="addTrack">Add track</button>
  <ul class="list"></ul>
</div>

Теперь повесим listener на кнопку добавить трек. Давайте найдем эту кнопку на странице. Так как querySelectorAll возвращает массив, нам нужен первый елемент.

const addTrackBtn = document.querySelectorAll('.addTrack')[0];

Теперь давайте повесим addEventListener на кнопку. Вторым аргументом у нас идет функция, в которой мы хотим что-то сделать. Мы хотим найти название трека, которое мы ввели в input. И консолим trackName.

addTrackBtn.addEventListener('click', () => {
  const trackName = document.querySelectorAll('.trackInput')[0].value;
  console.log('track name', trackName);
});

Если мы посмотрим в браузер, то видим, что у нас отрисовалась кнопки и input. И если мы что-то введем в input и нажмем add Track, в консоли у нас отображается имя введенного трека.

Теперь добавим dispatch имени трека

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

Теперь в консоли у нас выводится измененный стор с новым треком. Теперь мы хотим зарендерить список треков из store. Добавим в функции subscribe вывод массива. Найдем сначала елемент list. Потом пройдемся циклом по store.getState(). Создаем новый елемент li. Пишем текст в li и добавляем li к нашему листу.

store.subscribe(() => {
  console.log('subscribe', store.getState());
  const list = document.querySelectorAll('.list')[0];
  store.getState().forEach(track => {
    const li = document.createElement('li');
    li.textContent = track;
    list.appendChild(li);
  })
})

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

Давайте добавим очистку контейнера

list.innerHTML = '';

Теперь у нас добавляются правильные елементы. Теперь единственно, что работает неправильно - это то, что наш input не очищается. Давайте добавим это.

document.querySelectorAll('.trackInput')[0].value = '';

Теперь все работает отлично. Наш список рендерится так как он находится в store.

И давайте порефакторим немного код, чтобы у нас не дублировался поиск DOM елементов. Вынесем наверх кода нахождение списка, инпута и кнопки так как эти елементы никогда не меняются.

const addTrackBtn = document.querySelectorAll('.addTrack')[0];
const list = document.querySelectorAll('.list')[0];
const trackInput = document.querySelectorAll('.trackInput')[0];

Уберем консоли и изменим оставшийся код

store.subscribe(() => {
  list.innerHTML = '';
  trackInput.value = '';
  store.getState().forEach(track => {
    const li = document.createElement('li');
    li.textContent = track;
    list.appendChild(li);
  })
})

addTrackBtn.addEventListener('click', () => {
  const trackName = trackInput.value;
  store.dispatch({ type: 'ADD_TRACK', payload: trackName });
});

Вот так легко с редаксом мы реализовали store, actions и перерисовку DOM елементов.