Wondermarin

history.replace - заменяет запись в истории.
history.push - добавляет новую.

Service Worker стал опциональным начиная с 4 версии CRA и нужен для создания PWA.
Подробнее об этом вы можете найти в документации.

Starting with Create React App 4, you can add a src/service-worker.js file to your project to use the built-in support for Workbox's InjectManifest plugin, which will compile your service worker and inject into it a list of URLs to precache.

const BaseComponent = styled.div`
  color: black;
`;

const Component = styled(({ className, ...props }) => <BaseComponent calendarClassName={className} {...props} />)`
  color: white;
`;

Стили в BaseComponent распространяются на className.
Стили в Component на calendarClassName.

1. Зачем вы вешаете слушатель на реф?

useEffect(() => {
  titleRef.current.addEventListener('keyup', addTodo); // <-- ???
  return () => titleRef.current.removeEventListener('keyup', addTodo);
}, [])

2. Зачем вы используете фрагмент, когда возвращаете всего один элемент?

return (
   <> // <-- ???
    <input 
      type="text" 
      value={ title } 
      onChange={ e => setTitle(e.target.value) } 
      ref={ titleRef }
    />
  </> // <-- ???
);

3. Не используйте свойство keyCode оно является устаревшим, вместо него вы можете использовать key.

function addTodo(e) {
  if(e.keyCode === keyCodeEnter) { // <-- e.key === "Enter"
    props.addTodoCreator({
      title: title,
      isCompleted: false,
      color: 0,
    });
  }
}

Измените ваш код на этот:

const Header = ({ addTodoCreator }) => {
  const [title, setTitle] = useState("");

  const addTodo = (e) => {
    if (e.key === "Enter") {
      addTodoCreator({
        title: title,
        isCompleted: false,
        color: 0,
      });
    }
  };

  return (
    <input
      type="text"
      value={title}
      onChange={(e) => setTitle(e.target.value)}
      onKeyUp={addTodo}
    />
  );
};

Зачем вам переделывать компонент в классовый? Не понятно.

1. useHistory можно заменить на:

import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  ...

  render() {
    const { history } = this.props;
    ...
  }
}

export default withRouter(MyComponent);

2. history.push - заменять не надо.
3. У Formik есть HOC withFormik() https://jaredpalmer.com/formik/docs/api/withFormik.

const [myToken, setMyToken] = useState(
  localStorage.getItem("myToken")
);

Очень грубо, но это один из вариантов...

Зачем вы используете store.dispatch? У вас же в react-redux есть и хуки, и connect. Да и в целом я не очень понял что вы пытаетесь сделать...

Вот вам пример с хуками и без: https://codesandbox.io/s/magical-booth-sb95e

className != classNames

<CSSTransition
  in={this.state.openDropdown}
  timeout={200}
  className="dropdown fade"
  mountOnEnter
  unmountOnExit
>

При обновлении state происходит перерисовка компонента, если ваш компонент содержит в себе дочерние компоненты, то, очевидно, что они также будут перерисованы, родительский компонент это не задевает.

Взгляните на это несколько раз и сами ответьте на свой вопрос:

const rootReducer = combineReducers({
  propsReducer: reducer
});

const mapStateToProps = state => ({
    onLike: state.propReducer.like
});

А именно на propsReducer (в combineReducers) и propReducer (в mapStateToProps)
И почему в componentDidMount() вы ссылаетесь на какой-то неизвестный реакту this.props.propsReducer.day?

UPD (нерабочие кнопки)

{stateToPropsStartDataArray &&
Object.keys(stateToPropsStartDataArray).map(element => (
  <button
      data-stateToPropsCategory={element}
      onClick={e =>
      onFilter({
          stateToPropsCategory: e.target.dataset.statetopropscategory
      })
      }
      className={
      element === stateToPropsCategory ? "active" : "noActive"
      }
  >
      {element}
  </button>
))}

var newData = state.startDataArray[
  action.stateToPropsCategory || state.category
].filter(x => {
  return x["planeTypeID.code"]
    .toLowerCase()
    .includes(action.search || state.searchInput);
});

https://codesandbox.io/s/frosty-dew-u3wmu

componentDidMount() {
  if (this.props.users.length === 0) {
    // запрос к api
  }
}

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { personsFetchData } from '../Actions/persons';
// import { User, Headline, Paragraph, UserImage } from '../Website/Users/UsersStyles';

class PersonsData extends Component {
  componentDidMount() {
    this.props.fetchData('https://frontend-test-assignment-api.abz.agency/api/v1/users');
  }
  render() {
    const { users } = this.props.persons;
    return(
      <Fragment>
        { users ? users.map(user => <div>{ user.name }</div>) : null }
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  persons: state.persons.payload,
});

const mapDispatchToProps = dispatch => ({
  fetchData: url => dispatch(personsFetchData(url)),
});

export default connect(mapStateToProps, mapDispatchToProps)(PersonsData);

И я все еще советую вам ознакомиться с документацией:
Redux https://redux.js.org/
React Redux https://react-redux.js.org/