Антон Спирин

Вам, по-хорошему, надо передавать в карточку action, принимающий идентификатор поста и инициирующий запрос на сервер.
<Img onClick={() => likePost(post.id) />}

const mapDispatchToProps = {
  likePost,
};

Можно использовать redux-thunk

Посмотрите ответ c примером логики.

Функциональный компонент:
const Example = () => <Anything />;
Аналогичный классовый:

class Example extends React.Component {
  render() {
    return <Anything />;
  }
}

Так будет лучше:

function fetchProductBySlug(slug) {
  return async dispatch => {
    dispatch({ type: FETCH_PRODUCT_BY_SLUG });
    try {
      const { data } = await axios.get(`/products/${slug}`);
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_SUCCEEDED, payload: data });
    } catch (err) {
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_FAILED, payload: mapAxiosError(err) });
    }
  }; 
}

export default function product(state = initialState, action) { 
  switch(action.type) {
    case FETCH_PRODUCT_BY_SLUG:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_SUCCEEDED:
      return {
        ...state,
        product: action.payload,
        isFetching: false,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}

@babel/preset-flow

Родитель выполняется 1 раз.

Родителем для ваших компонентов является не BkOpenFolder, а Modal.Body, над ним еще есть Modal. Инициирует обновление дочернего древа один из них.

Если использовать PureComponent то 2 раза. Но всё равно раз лишний.

Нет там лишнего раза, для четырех компонентов:
4 вызова конструктора
4 вызова componentWillMount
4 вызова render
4 вызова componentDidMount

Для того чтобы убрать лишние перерисовки компонентов можно:
1. Использоавать PureComponent.
2. Реализовать метод жизненного цикла shouldComponentUpdate.

Компоненты обернутые в вызов connect из пакета react-redux, так же не обновляются при перерисовке древа, если входящие свойства не изменились.

Внимательно читаем, что возвращает метод Array.prototype.splice.

removeItem(index) {
  const newItems = [...this.state.items];
  newItems.splice(index, 1);
  this.setState({ items: newItems });
}

Правильней будет удалять элемент не по индексу, а по id:

removeItem(id) {
  this.setState({ 
    items: this.state.items.filter(item => item.id !== id), 
  });
}

Для этого передавайте id в хандлер:

<button onClick={() => this.removeItem(item.id)} class="nhc-btn">

Еще вы не передаете свойство key:
<div key={item.id} class="note-container">
Lists and keys

И такое форматирование кода никуда не годится. Почитайте гайдлайны от Airbnb:
Airbnb JavaScript Style Guide
Airbnb React/JSX Style Guide

const index = state.get('users').findIndex(user => user.get('id') === payload.user.id);
return state.setIn(['users', index], fromJS(payload.user));

Для данных вам вполне хватит json файла.
Для картинок cdn.

Надо подключать tslint и опционально prettier:

npm i -S tslint tslint-config-airbnb tslint-config-prettier tslint-react prettier

tslint.json:

{
  "extends": ["tslint:recommended", "tslint-config-prettier", "tslint-config-airbnb", "tslint-react"],
  /* ... */
}

Почему dispatch не срабатывает?

Потому что вы его не вызываете.

Замените строку:
setProductComments(/* ... */);
на:
this.props.setProductComments(/* ... */);
или на:

this.props.dispatch(setProductComments(/* ... */));

Чтобы первый вариант работал, измените mapDispatchToProps:

const mapDispatchToProps = {
  setProductComments,
};

Еще вы импортируете в actions и reducer типы действий, но пишите в type строки хардкодом. Не надо так.
Запросы к API принято выносить в async actions.

1. Выпилить из проекта JQuery.
2. Почитать документацию React о том как работать с формами.
3. По-хорошему, добавить в проект Redux.

Простой пример решения вашей проблемы без использования Redux:

class Main extends Component {
  state = {
    isInitializing: true,
    isSignedIn: false,
    user: null,
  };

  async componentDidMount() {
    // тут достаем токен, например, из cookie
    const token = storage.get(TOKEN_KEY); 
    
    if (token) {
       // тут сетим токен в заголовки по-умолчанию библиотеки для HTTP-запросов
      api.setHeader('Authorization', `Bearer ${token}`);

      const user = await api.getUser();

      this.setState({ user, isSignedIn: true, isInitializing: false });
    } else {
      this.setState({ isInitializing: false });
    }
  }

  render() {
    const { isSignedIn, isInitializing } = this.state;
    
    // на время инициализации показываем ProgressBar
    if (isInitializing) return <ProgressBar />;    

    return (
      <code lang="html">
        <Router>
          <div id = 'content'>
            {isSignedIn ? (
              <React.Fragment>
                <Route path='/feed' exact component={Feed} />
                <Redirect from='/' to="/feed" />
              </React.Fragment>
            ) : (
              <React.Fragment>
                <Route path='/' exact component={Auth} />
                <Redirect from="/feed" to="/" />
              </React.Fragment>
            )}
          </div>
        </Router>
      </code>
    );
  }
}

Все же, советую использовать redux. А в качестве HTTP клиента - axios.
При использовании redux процесс инициализации выносится в action:

const store = configureStore();
store.dispatch(init()); // начинаем процесс инициализации еще до монтирования приложения

ReactDOM.render(
  <Provider store={store}>
    <Main />
  </Provider>, document.getElementById('main'),
);

Навскидку:
1. В проектах по-хорошему использовать типизацию TypeScript, Flow. PropTypes в таком случае использовать не надо.

2. Тут в коде бессмысленное условие:

render() {
    const { report = {} } = this.props;
    return (
      <Fragment>
        <Head>
          <title>Doctor problem with {report.doctor.name}</title>
        </Head>
        {report && <ReportDetail showDetailButton={false} data={report} />}
      </Fragment>
    );
  }

report у вас существует всегда. Надеюсь понимаете, что пустой объект кастуется в true.

3. Про ESLint/TSLint уже писали.

4. Ваши редьюсеры не имеют ключей состояния. Какой-то запрос может быть в процессе, а ваши компоненты об этом не знают.

5. Логику работы с куками лучше вынести в actions.

6. Нет смысла разделять импорты отступами, просто соблюдайте очередность и смотрите пункт 3.

7. Компонент __app можно декомпозировать.

8. Неясно зачем тут геттер
get renderReports() { /* ... */ }

9. Для сортировки можно использовать меморизацию.

10.

handleChange = (e, key) => {
    const value = e.target.value;
    this.setState({
      [key]: value,
    });
  };

<Input
  id="outlined-name" //  зачем?
  placeholder="Problem Summary"
  value={reportTitle}
  onChange={e => handleChange(e, "reportTitle")}
/>

Можно заменить на:

handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  };

<Input
  id="outlined-name" //  зачем?
  placeholder="Problem Summary"
  name="reportTitle"
  value={reportTitle}
  onChange={handleChange}
/>

11. /components/ReportDetail/constants.js зачем?

12. Где-то запросы в экшенах, где-то в компонентах.

Не знаком с next.js поэтому ничего объективного по организации кода сказать не могу, так как не до конца понимаю как этот фреймворк работает. Вижу, что авторизованных запросов пока нет. Запросы к API у вас будут происходить только на стороне клиента?

А где тут декларация темы?