Дмитрий

state не меняется моментально после this.setState, если вы хотите получить новые значения, то

const data = await response.json();
this.setState({ info: data });
const artistname = data.artist.name;
const title = data.info.title;

Да. Все что влияет на отрисовку компонента и меняет значение за время жизненного цикла, должно быть внутри стейт

Строчка
todo.completed = !todo.completed
выполняется при каждом клике дважды, поэтому сначала значение становится false, затем снова true, в то время как текстовая переменная прекрасно меняется. Мне немного стыдно, поскольку точно не знаю механизм работы реакта в данном случае, но выхода тут два:
1)

if (todo.id === id) return { ...todo, completed: !todo.completed }
return todo

Что в действительности более правильно, так как каждый изменяемый элемент в реакте должен менять ссылку при изменении.

2) Вычислять новый completed сразу

onChange={() => props.handleChange(props.item.id, !props.item.completed)}

и уже в функции пользоваться полученным значением

handleChange(id, newCompleted) {
      this.setState(prevState => {
        
          const updatedTodos = prevState.todos.map(todo => {
              if (todo.id === id) {
                todo.completed = newCompleted 
              }
              return todo
          })
          return {
              todos: updatedTodos
          }
      })

В коде
1) onAddBtn ни откуда не вызывается, повесьте ее на кнопку с плюсом на событие onClick, чтобы она срабатывала
2) isAdding никуда не выводится, как вы узнаете, что она не срабатывает?

Если повесить ее на кнопку и вывести результат, то окажется, что все замечательно меняется

Потому что rejectedStatuses содержит состояние на момент последнего рендеринга. Оно не может измениться от вызова setRejectedStatuses ну хотя бы потому что это константа. А вы проверяете его значение немедленно после вызова функции установки, словно константа раз и поменяется. Оно поменяется при следующем вызове функции компонента, то есть после рендеринга, вызванного сменой состояния.

Модалку вывести на уровень App, одной модалки на приложение достаточно, по нажатии на кнопку ее активируете.

UpdateCount разкомментируйте и не забываем ставить кол-во миллисекунд в setInterval

componentDidMount() {
  setInterval(() => {
    this.updateCount()
  }, 1000) 
}

Умный компонент должен читать свойство из стора, куда пишется имя кнопки и передавать булево значение в глупый компонент Method, Который в зависимости от этого глупого значения добавляет к кнопке класс active или нет.

export default function Method({title, description, name, isActive}) {

...
       <Button
          name={name}
          className={style.button + (isActive ? ' active-class' : '')}

Либо как вариант передавать activeName в Method и там уже сравнивать

export default function Method({title, description, name, activeName}) {
  const isActive = name === ActiveName 
...
       <Button
          name={name}
          className={style.button + (isActive ? ' active-class' : '')}

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

С помощью ref-ов
https://learn-reactjs.ru/core/refs-and-the-dom

Пример:

class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div className={"someClass"} ref={this.myRef} />;
    }
  }

this.myRef.current будет содержать ссылку на элемент с классом someClass

Первое правило Redux - всегда спредить изменяемую величину, иначе редакс не знает, что вы ее поменяли. Используемый вами метод splice не меняет массив, да и map в данном случае бессмысленен. Верный код будет таким:

const index = state.tasksData.findIndex(({ ID }) => ID === payload.ID)
if (index > -1) return {
  ...state,
  tasksData: 
    state.tasksData.slice(0, index).concat(
      state.tasksData.slice(index + 1))
}

компоненты запускаются только исходя из данных, вы не можете запускать их вручную. Вы можете в главном компоненте сделать свойство состояния

const App = () => {
  const [showComponent, changeShowComponent] = useState(0)
  return <div>
    <button onClick={() => changeShowComponent(1)}>Начинаем</button>
    {showComponent === 1 && <FirstModalComponent changeShowComponent />}
    {showComponent === 2 && <SecondModalComponent changeShowComponent />}
  </div>
}

Соответственно внутри первого модального компонента в нужный момент вызываете переданную в него функцию changeShowComponent(2)и все перерисуется, первый компонент исчезнет, второй появится

Выводить header по условию, в зависимости от location, Если перед открытием вашего компонента меняется адрес, или завести переменную в state или в store, которую менять перед переходом к компоненту stories.

Большинство программистов, в том числе те, кто будет вас собеседовать - как мартышки, им сказали что правильно так и так, они не задумываясь передают это дальше и бьют по голове каждого, кто осмеливается делать не по шаблону. Вся эта возня с экшинами и типами безусловно избыточна в редаксе в 95% случаев. Я вообще делал надстройку, чтобы напрямую вызывались процедуры, изменяющие стейт. Хотя не рискнул бы выложить это в качестве портфолио, по упомянутым выше причинам.

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

Я когда учился, делал универсальную таблицу с возможностью группировки, отбора, сортировки строк, подсчетом итоговых значений. Это очень немаленький проект и хорошо прокачивает. Естественно без использования готовых ui компонентов