Error: Component ReactCardFlip requires 2 children to function. В чем проблема?

Rebuslol, попробуйте такую структуру:

<ReactCardFlip>
  <div>
    // Разметка передней стороны
  </div>
  <div>
    // Разметка задней стороны
  </div>
</ReactCardFlip>

Error: Component ReactCardFlip requires 2 children to function. В чем проблема?

Rebuslol, ReactCardFlip'у нужны два дочерних элемента

<ReactCardFlip>
  <div>1</div>
  <div>2</div>
</ReactCardFlip>

Error: Component ReactCardFlip requires 2 children to function. В чем проблема?

Попробуйте опустить закрывающий </ReactCardFlip> до </section>.

Reducer вызывается по 2 раза в useReducer?

aleks_web_dev, здесь

Reducer вызывается по 2 раза в useReducer?

aleks_web_dev, проверьте - не обёрнут ли ваш корневой компонент в StrictMode, если да - удалите его и будет счастье.

Как прокинуть данные полученные с сервера в форму редактирования?

ssdakj, список с продуктами значит есть, это отлично.
Он у вас в каком виде, массив из объектов? Или же большой объект, где ключами служат id продуктов, а значениями сами продукты?

Как прокинуть данные полученные с сервера в форму редактирования?

ssdakj, уже теплее.То есть под страницу редактирования у вас выделен отдельный редьюсер?

Правильно ли я уловил здесь вашу логику?

// 1. product - будет пустой объект на старте
// 4. Получаете долгожданный product
// 5. И теперь хотите занести данные product в локальный стейт для дальнейшего редактирования?
const { product } = useSelector(state => state.products);

useEffect(() => {
  // 2. Запрашиваете конкретный продукт по id
  dispatch(fetchProduct(params.id));
  // 3. Потом из thunk отправляете полученный продукт в редьюсер
}, [dispatch, params.id]);

Как прокинуть данные полученные с сервера в форму редактирования?

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

До того как вы переходите на страницу редактирования какого-либо продукта, в вашем редакс сторе уже имеются данные с загруженными продуктами(возможно в другом редьюсере), я правильно понимаю?

Почему не работают вложенные роуты в react-dom-router?

Вместо to нужно передавать path.

Почему компонент с React.useState() рендерится два раза?

Алексей Алексеев, здесь очень хорошо объясняется.

Почему компонент с React.useState() рендерится два раза?

Алексей Алексеев, удалите React.StrictMode в index.js.

Нe получаю данные из Redux Store?

Остап,

так же не работает, если я вас правильно понял

Нет, вы меня неправильно поняли. Я вам не предлагал менять код. Мой комментарий был к ответу Александр Черемхин.
Если в connect, mapDispatchToProps передаётся в виде объекта, то компонент уже не будет получать dispatch в свои пропсы.

Так работать не будет:

this.props.dispatch( this.props.booksLoaded(data));

Ссылочка на документацию в моём предыдущем комменте.

Нe получаю данные из Redux Store?

const mapDispatchToProps ={
   booksLoaded
};

При такой форме записи, в пропсы dispatch уже не придёт. Придёт booksLoaded ссылающийся на (...args) => dispatch(booksLoaded(...args)).

Link

Не сохраняется новый объект в массиве state.messages в reducer'e?

chatterbox777, проблема была в этой строке <form onSubmit={() => this.props.addMessage()}.
Браузер, по умолчанию, перезагружает страничку после сабмита формы. Именно по этой причине, как вы заметили, продолжительность жизни вашего редакс стэйта составляла не более секунды. То есть, после каждой перезагрузки, стэйт принимал начальные значения. Чтобы решить эту проблему, необходимо отловить событие сабмита и, как говорится, его запревентдефолтить)
e.preventDefault() - блокирует дефолтное поведение браузера и препятствует обновлению страницы.

Не сохраняется новый объект в массиве state.messages в reducer'e?

chatterbox777, согласен. Поправил код.

Не сохраняется новый объект в массиве state.messages в reducer'e?

Попробуйте так:

class Chat extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.addMessage();
  }

  render() {
    return (
      <div className={classTags.disp}>
        ...
        <form onSubmit={this.handleSubmit}>
          ...
        </form>
      </div>
    );
  }
}

Проблема с Redux ( Cannot read property 'map' of undefined)?

Также было бы неплохо вместо UpdateMenu передать результат от combineReducers.

Как правильно писать два класса?

kirillleogky, 1, 2. Это должно помочь.

Как сохранить оригинальный index массива при объединении?

А если так: <td>{(student.index || index) + 1}</td>?

Как сохранить оригинальный index массива при объединении?

arr = arr.concat({...group[i], index: i});

...

currentGroup.map((student, index) => {
  return (
    <tr key={index} className="line">
      <td>{student.index + 1}</td>
      <td>{student.name}</td>
      <td>{student.lastname}</td>
      <td>{student.status}</td>
    </tr>
  );
})