laguna1132

Набросал пример, экшен отдельно выносить не стал, думаю это не смутит.

Перерендер произойдет - https://codesandbox.io/s/m43v2pmxj9
(по клику на кнпоку происходит console.log 'render')

p.s. следовательно, если у вас не работает - то либо где-то ошиблись в подписке (в mapStateToProps), либо где-то еще. Сделайте так же пример на codesandbox, разберемся.

Правой кнопкой по столбцу с номерами строк, там выбрать annotate

Пакет flow не нужен, нужен flow-bin (локально как минимум).
По настройкам у меня пустой .flowconfig и настройка в редакторе:
"flow.useNPMPackagedFlow": true,

Самое лучшее решение — отобрать у дизайнера компьютер.
Это я вам как дизайнер говорю.

Кажется, что <pre> будет самым простым вариантом.

// сортирует вложенные в parent элементы по их текстовому содержимому
parent.innerHTML = [...parent.children].sort((a, b) =>
    a.textContent > b.textContent ? 1 : -1
).map(node=>node.outerHTML).join('')

https://jsfiddle.net/my4cLbz1/

sass-lang.com/documentation/file.SASS_REFERENCE.html

как я понял, это миксин.
юзать так:

+body1
    .elem

но это какой то совсем старый синтаксис. юзайте SCSS. 2018 год на дворе.

Прочитайте про модель выполнения event-loop

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

Нет профита, не заморачивайтесь.
Когда "профит" от immutable будет маячить на горизонте, вы уже будете к этому готовы (либо столкнетесь с какой-то проблемой и выйдете на иммутейбл, либо просто повысите теоретическую базу / сложность задачи). Насколько я понимаю, с использованием immutable и без использования .toJS() - поиск в структуре ваших данных будет производиться быстрее.

p.s. если найду видео добавлю, там была презентация. пока не нашлось.

Sideeffect - это что-то, что может повлиять на "чистоту" вашей функции. Редьюсер же - функция. Чистая функция, это значит такая, что если ей на вход подать одни и те же параметры, то результат будет всегда один и тот же.

Пример: есть у вас в localStorage имя пользователя. И вы в коде пишите, что-нибудь такое:

case SET_DISPLAY_NAME: {
  return {
    ...state,
    name: window.localStorage.getItem('name') ? window.localStorage.getItem('name') : action.payload,
  }
}

Следовательно, если вы подадите на вход функции, имя Вася, то оно вам вернет Васю только если "в sideeffect локал_сторадже" нет ничего. Здесь вы не можете быть уверены, что если подать Васю, вам всегда вернется Вася.

По примеру с комментариями - не думаю что хороший пример. Айдишники генерировать будет бэкэнд ваш. Вы добавляете новый комментарий путем отправки его на сервер, с сервера приходит статус "ОК" и ваш комментарий уже с айдишником.

Бывает, что айдишники нужно генерировать самому, тогда они отлично генерятся в acftionCreator'ax. Например, делаете вы систему уведомлений, и у каждого уведомления должен быть свой id (например, тут сервер вам не нужен, вы ничего туда не отправляете, просто визуальная часть). В таком случае, я бы не стал генерировать id через middleware, а просто делал бы это в "экшенах".

Тем не менее, с генерацией айди все тоже самое, что и с localStorage. Вы не уверены, что подав на вход: имя, текст комментария и почту - получите ТОТ же результат, что и в прошлый раз с такими же входными параметрами (айдишники то разные будут!)

Если вы хотите описать компонент, используемый в единственном экземпляре, то лучше использовать объект, а не класс. Обработчик событий может быть как в Menu, так и внешний:

const Menu = {
  el: document.getElementById('js-main-menu'),
  btn: document.getElementById('js-main-menu__btn'),

  init() {
    this.toggle = this.toggle.bind(this);
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);

    this.btn.addEventListener('click', this.toggle);
  },

  toggle() {
    this.el.style.display = 
     !this.el.style.display || this.el.style.display === 'block' ? 'none' : 'block';
  },

  open() {
    this.el.style.display = 'block';
  },

  close() {
   this.el.style.display = 'none';
  }
}

export default Menu;

import Menu from './Menu';

const closeButton = document.getElementById('js-close-button');
const openButton = document.getElementById('js-open-button');

Menu.init();
closeButton.addEventListener('click', Menu.close);
openButton.addEventListener('click', Menu.open);

Демо: https://jsfiddle.net/ey53xuyp/

В случае с классом вешайте хандлеры в constructor:

class Menu {
  constructor({ el, btn }) {
     this.el = document.getElementById(el);
     this.el = document.getElementById(btn);

     this.toggle = this.toggle.bind(this);
     this.close = this.close.bind(this);
     this.open = this.open.bind(this);
     
     this.btn.addEventListener('click', this.toggle);
  }  
  ...
}

export default Menu;

import Menu from './Menu';

const closeButton = document.getElementById('js-close-button');
const openButton = document.getElementById('js-open-button');
const menu = new Menu({
  el: 'js-main-menu',
  btn: 'js-main-menu__btn',
});

closeButton.addEventListener('click', menu.close);
openButton.addEventListener('click', menu.open);

Если же вы хотите использовать компонентную архитектуру, с наследованием от базового класса компонента, вам лучше использовать React или Vue. Иначе рискуете написать трудно поддерживаемых, плохо масштабируемых велосипедов.

https://jsfiddle.net/NooNoo1488/njmmfq6p/