Антон Спирин

const mapDispatchToProps = dispatch => ({
  onTryAutoSignup: () => dispatch(actions.authCheckState()),
});

В вашем случае, mapDispatchToProps можно определять в виде объекта:

const mapDispatchToProps = {
  onTryAutoSignup: actions.authCheckState,
};

По-умолчанию в createSelector используется функция поверхностного сравнения. Хотите делать глубокое сравнение используйте createSelectorCreator и свою функцию сравнения. В документации есть пример.

Можно просто менять состояние карточки:

const ImageCard = ({ image, bio }) => {
  const [showBio, setShowBio] = useState(false);
  const handler = useCallback(() => {
    setShowBio(state => !state);
  }, []);

  return (
    <Wrapper>
      {showBio ? <Bio bio={bio} /> : <Image src={image} />}
      <Button onClick={hanlder}>Show bio</Button>;
    </Wrapper>
  );
};

Для подобного рода задач существует @keyframes

Все должно работать.
1. Уберите параметр method
2. Authorization имеет смысл записывать в заголовки по-умолчанию:

axios.defaults.headers.common.Authorization = `Bearer ${token}`;

handleChange и handleSubmit в редьюсере делать нечего. Оставьте эти хандлеры в компоненте.

В актуальной версии create-react-app генерируется webpack.config.js и webpackDevServer.config.js.

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

Если на беке нет API и вы загружаете данные из json файла, то никак.

Кстати console.log(productsList); выводится два раза и первый раз NULL. почему?

Потому-что componentDidMount срабатывает после вызова render. Это нормально.

Если вы работаете через IDE, то перейдя по цепочке типов увидите, что History это:

interface History<HistoryLocationState = LocationState>

а LocationState в свою очередь:
type LocationState = any;

В теории, тип должен переопределяться третим аргументом RouteComponentProps, но у меня это не работает. Возможно, баг.

Еще обертка withRouter в вашем примере не нужна.

Для стилей - медиа-запросы.
Для рендера разных версий древа компонентов - user agent.

bootstrap:

import React from 'react';

const Example = () => (
  <div className="container-fluid">{/* children */}</div>
);

reactstrap:

import React from 'react';
import { Container } from 'reactstrap';

const Example = () => (
  <Container fluid>{/* children */}</Container>
);

react-bootstrap:

import React from 'react';
import Container from 'react-bootstrap/Container';

const Example = () => (
  <Container fluid>{/* children */}</Container>
);

1. Для того чтобы научиться отображать списки почитайте:
Списки и ключи
2. Вам достаточно всего одного роута с параметром. Почитать:
Responsive routes
3.

я не могу использовать api в общем

"Не могу" это нельзя, нет доступа или не умею? Если последнее, то:
AJAX и обращение к API (тут можно использовать хук useEffect)
Использование хука эффекта
Использование Fetch API
Axios: Example

1. В экшене меняем строку:

.then(data => dispatch(fetchSuccess(data.success)))

2. В редьюсере:

case 'LOGIN_USER_SUCCESS':
  return {
    ...state,
    key: action.key, 
  };

3. connect:

const mapStateToProps = state => ({
  success: state.authorisation.key,
});

export default connect(mapStateToProps)(YourComponent);

По-хорошему исправить:
authorisation ----> authorization

1. При успешной авторизации передавайте на клиент токен.
2. Храните токен в cookie. Проверяйте его наличие при инициализации и либо отрисовывайте вариант для залогиненного пользователя, предварительно скачав его данные, либо для гостя.
3. Располагая такими данными как id пользователя, вы с легкостью можете отличать стоит ли вам показывать кнопку edit в профиле или нет:

const { me, user } = this.props;
const isOwner = me.id === user.id;

return (
  <>
    {isOwner && <Button onClick={this.handleEditClick}>Edit</Button>}
    {/* other jsx */}
  </>
);

где me - текущий залогиненный пользователь, user - пользователь чей профиль загружен.

4. Само собой, все права надо проверять на стороне сервера. Для этого токен следует посылать в заголовках запросов.

Есть какой-то материал для осознания, как реализовать полноценный логин

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

Как вариант можно использовать такой хак:

<span itemProp="price" {...{ content: '10.00' }}>10</span>

иногда удобно определять свойства в переменной:

const spanProps = {
  itemProp: 'price',
  content: '10.00',
};

return (
  <span {...spanProps}>10</span>
);

Насколько понял вашу задачу, вы хотите вынести Header и рендерить под ним разные страницы. Это можно сделать, например, так:

const Amasia = () => (
  <div>Amasia</div>
);

const Product = ({ match }) => (
  <div>
    Page number: {match.params.page}
  </div>
);

const Header = () => (
  <header>
    <nav>
      <Link to="/">Amasia</Link>
      <Link to="/Mens/Hat/1">Product</Link>
    </nav>
    <div>Logo</div>
    <div>FormSearch</div>
    <div>ButSearch</div>
  </header>
);

const App = () => (
  <>
    <Header />
    <main>
      <Switch>
        <Route exact path="/" component={Amasia} />
        <Route exact path="/Mens/Hat/:page" component={Product} />
      </Switch>
    </main>
  </>  
);

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  rootElement,
);

React interview questions and answers