Антон Спирин

Не правильно используете Fetch API.
Простой пример использования:

fetch('https://example.com/api')
  .then(response => response.json())
  .then(json => dispatch(someAction(json)))
  .catch(console.log);

А с чего вы решили, что асинхронная функция должна возвращать Promise без вызова?
Будет работать либо так:

const handleFiles = () => {
  return async handle => {
    let result;
    result = 'hello';
    return result;
  };
};
handleFiles()().then(result => console.log(result)).catch(console.log(e));

либо так:

const handleFiles = async () => {
  let result;
  result = 'hello';
  return result;
};

handleFiles().then(result => console.log(result)).catch(console.log(e));

Складывается впечатление, что вы видели где-то асинхронные действия redux-trunk и даже писали, но толком не понимаете как они работают и зачем над асинхронной функцией обертка. Дело в том, что там вы передаете в dispatch вызов action и middleware получает возвращаемую функцию, а затем ее вызывает.

Вы все неправильно поняли. Обращайтесь в такие моменты к спецификациям.
1. Если вы передаете NaN, нативная функция ToNumber возвращает NaN, затем ToInteger заменяет значение на +0.
2. Если вы передаете null, ToNumber заменяет его на +0.
3. Если передаете undefined первым аргументом, его сначала ToNumber заменяет на NaN, затем ToInteger на +0.
4. Если вы передаете undefined вторым аргументом, алгоритм использует вместо него длину массива.

class App extends React.Component {
  state = {
    category: 'business',
    items: [],
  };

  componentDidMount() {
    this.fetchData();
  }
  
  fetchData() {
    axios.get('https://newsapi.org/v2/top-headlines?country=us&category='+this.state.category)
      .then(res => {
      this.setState({ items: res.data.articles });
    });
  }
  
  changeCategory = () => {
    this.setState(
      { category: 'entertainment' },
      this.fetchData,
    );
  };


  render() {
    return (
      <div className='wrapper'>
        <button onClick={this.changeCategory}>CLICK</button>
      </div>
    );
  }
}

HTML:

<input class="js-search" />
<a class="js-search-link" target="_blank" href="#">Search in Google</a>

JS:

var defaultHref = 'https://google.com/search?q=';
var search = document.querySelector('.js-search');
var link = document.querySelector('.js-search-link');

link.setAttribute('href', defaultHref);

search.addEventListener('input', function() {
  link.setAttribute('href', defaultHref + search.value.trim().replace(/ +/, '+'));
});

Демо.

Вызов .trim() - удаляет пробелы в начале и конце строки.
Вызов .replace(/ +/, '+') - заменяет пробелы, в том числе множественные, плюсами.

Используйте событие input

Можно так.

Если надо производить какое-то действие каждую секунду, то правильней использовать setInterval:

function startTimer(secs) {
  var i = 0;
  var timer = document.getElementById('timer');

  var interval = setInterval(function() {
    if (++i >= secs) {
      clearInterval(interval);
      timer.innerHTML = 'Done!';
    } else {
      ++timer.innerHTML;
    }
  }, 1000);
}

startTimer(10);

Демо.

Если действие каждую секунду производить не надо, то таймаут рациональней задать один на всю длительность:

function startTimer(secs) {
  var timer = document.getElementById('timer');
  setTimeout(function() {
      timer.innerHTML = 'Done!';
  }, secs * 1000);
}

startTimer(10);

Демо.

Можно использовать debounce или throttle:

function debounce(f, ms) {

  let timer = null;

  return function (...args) {
    const onComplete = () => {
      f.apply(this, args);
      timer = null;
    }

    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(onComplete, ms);
  };
}

function throttle(func, ms) {

  var isThrottled = false,
    savedArgs,
    savedThis;

  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, ms);
  }

  return wrapper;
}

Код вашего хандлера при использовании debounce будет такой:

function handler() {
  // do something
}

var debouncedHandler = debounce(handler, 500);

document.querySelecror('.submit').addEventListener('click', debouncedHandler);

С throttle аналогично.

Реализации debounce и throttle есть в lodash. Если используете эту библиотеку можно взять оттуда.

Вы пытаетесь отрендерить объект состояния и ловите исключение.
У вас в свойство count передается объект:

{
  counterReducer: 0,
}

Исправьте mapSateToProps на:

function mapStateToProps(state) {
    return {
        count: state.counterReducer,
    };
}

или:

const mapStateToProps = state => ({
  count: state.counterReducer,
});

Это embed проигрыватель сервиса https://soundcloud.com
Для проигрывания конкретного трека, на любом треке достаточно нажать Share > Embed, выбрать нужные настройки и скопировать код.

https://developers.soundcloud.com/docs/api/html5-widget

Почитайте про геттеры и сеттеры.

@keyframes
Пример

Вы, видимо, механику происходящего не понимаете.

Есть родительский класс и есть дочерний класс.

Нет, есть расширяемый класс(класс-предок) и есть класс наследующий свойства и методы от класса-предка(класс-потомок).

У вас в классе-предке ничего из класса-потомка не доступно, вы сделали ошибочные выводы.
На самом деле в компоненте-предке определен метод ngOnInit который, наследуется и вызывается компонентом-потомком.
Вот посмотрите, я изменил ваш пример и теперь в консоли видно кем именно вызывается ngOnInit в вашем примере.
А вот так можно воспроизвести, по сути, ту же ситуацию.

Срочно подтягивайте основы JavaScript и API Angular.

class properties экспериментальный синтаксис.
В этом случае поле state задается после (простой пример) вызова конструктора React.Component, в котором инициализируются преданные props. Поэтому когда вы определяете state, props уже определены и доступны.
Если используете transform-class-properties, он входит в stage-0, stage-1, stage-2, то смело используйте.