Алексей Уколов

С использованием React Router, например: https://reactrouter.com/web/example/modal-gallery

Ну или через флаги Redux (или любое другое управление состоянием), но этим в разы тяжелее управлять.

У вас два action:

1. Запусти запрос
   
2. Сохрани результат
   

Поэтому и dispatch два.

В then приходит результат, который возвращает предыдущий then. Метод forEach возвращает undefined.

Традиционно, к плохо сформулированному вопросу заведомо бесполезный ответ:

componentDidMount() {
  this.setState({
    x: 1
    y: 2
    z: 1-2 
  })
}

Опишите проблему нормально. Зачем вообще хранить в стейте то, что можно легко вычислить? А если хранить всё же нужно, то что мешает вычислять не из каких-то несуществующих переменных?

Нужно в setState заменить forEach на map (только не бездумно, а поняв разницу между ними).

genres={el.genres || []}

When should I learn Redux?
What to learn can be an overwhelming question for a JavaScript developer. It helps to narrow the range of options by learning one thing at a time and focusing on problems you find in your work. Redux is a pattern for managing application state. If you do not have problems with state management, you might find the benefits of Redux harder to understand. Some UI libraries (like React) have their own state management system. If you are using one of these libraries, especially if you are just learning to use them, we encourage you to learn the capabilities of that built-in system first. It might be all you need to build your application. If your application becomes so complex that you are confused about where state is stored or how state changes, then it is a good time to learn Redux. Experiencing the complexity that Redux seeks to abstract is the best preparation for effectively applying that abstraction to your work.

https://redux.js.org/faq/general#when-should-i-lea...

case "SET_PROJECT_DATA": {
  return state = {
    ...state,
    [action.payload.name]: action.payload.value
  };
}

Приравнивать к state здесь (и в других местах) совершенно не нужно, нужно просто вернуть новый объект.

case "SET_PROJECT_DATA_ARRAY": {
  action.payload.forEach(function (item) {
    if (typeof item === "object") {
      const keys = Object.keys(item);
      keys.forEach((key) => state = {
        ...state,
        [key]: item[key]
      });
    }
  });
}

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

cols: prevState.cols,

Зачем вы мутируете объект предыдущего состояния?
Вы всегда возвращаете ссылку на один и тот же объект, вот Реакт и не понимает, что он изменился, ведь внутрь объекта он не смотрит.

this.setState((prevState) => {
  return {
    cols: prevState.map((col, index) => {
      if (index !== id) {
        return col;
      }

      return {
        ...col,
        cards: [
           ...col.cards,
           {/*new card fields*/}
        ]
      }
    }
  }
})

редакс всё время обходит полностью все редьюсеры?

Именно так. В примере много лишнего, поскольку он форкнут из полноценного официального, но обратите внимание, что на любой экшен в консоль выводится две записи - по одной из каждого редьюсера: https://codesandbox.io/s/ecstatic-night-yv27q

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

const borders = {
  published: "2px solid #F6AD55",
  ...
}

 ...

return borders[props.status]

1. Прочитать сообщение.
   
2. Перевести его.
   
3. Сделать компонент Box на основе класса, а не функции.
   

const newElemProps = {
  [el]: !old[el]
};

Потому что меняется сам объект state и исходя из этого props компонента - mapStateToProps же каждый раз новый объект возвращает.

Но это также есть и в PHP фреймворках описанных выше.

Есть, но это работает на сервере, а Реакт на клиенте. Это принципиально разные сценарии использования сайта.

На вопрос "зачем нужен react" вы найдёте огромное количество ответов в поисковике.

Не могу понять почему ошибку выдает.

Потому что вызываете setState в конструкторе, по сути.

нужно запустить через componentDidMount но это тоже не сработало

А должно было. Но поскольку код вы не показали, в чём там был подвох нам неизвестно. Скорее всего, вы просто добавили вызов в componentDidMount, но не убрали его из конструктора.

Конечно, нужно всё переписать - у jquery и react принципиально разные механизмы работы и философия.
Инструкции тут быть не может.

https://reactrouter.com/web/guides/scroll-restoration

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Теоретическая разница есть, на практике - скорее никакой, если не считать, что в одном случае вы определяете дефолтный импорт, а во втором именованный.

В теории:
1. Вторая функция стрелочная, она работает чуть иначе, чем обычная.
2. В первом случае Function Expression, во втором Function Declaration: в чём разница. Хотя, тут я не уверен в контексте импорта - может, это всегда считается declaration.

Если отвечать именно в разрезе компонентов React, то разницы именно в привёденном коде нет никакой.