Интерпретатор идет по коду сверху вниз и вот что происходит с вашим кодом:
1) Диспатч экшена в редакс
2) логирование текущего пропса
3) изменение стора редакс
4) т.к. изменяется стор, а компонент App слушает изменения стора в компоненте App, он перерисовывается и ререндерит компонент Register с новыми пропсами, и в нем уже логирование идет обновленного стора
Комментарии по коду:
1) Не именуйте файлы и функции redux с большой буквы. Функции с большой буквы в JS - это конструкторы. Используйте camelCase
2) Слушать редакс стор лучше в самом компоненте Register, а не в App. Т.к. App это вообще не нужно. При каждом изменении отслеживаемого свойства в сторе вы ререндерите и App и Register, а должен ререндерится только Register
3) mapDispatchToProps возвращает в итоге объект, поэтому можно использовать синтаксис проще:
a) Вариант 1 - просто вернуть объект const mapDispatchToProps = { setName };
b) В виде деструктуризации в качестве второго аргумента connect connect(null, { setName });
MRcracker, react в вп используется только для гутенберга, насколько мне известно. Вы можете хоть сейчас впендюрить реакт в свой проект на вп, но без SSR это не имеет смысла, если только вам таким образом проще разрабатывать, чем на чистом JS и наличие исходного html кода не важно.
Но если вам нужен SSR, то это сильно усложняет задачу и профит от такого будет только в 2х случаях:
1) Вы пилите учебный проект
2) Вы сидите на зп и у работодателя дофига денег, раз он хочет пилить что-то скрестив вп и реакт.
Но обычно, проекты на вп - низкобюджетные. И именно поэтому нет смысла их скрещивать - это как минимум дорого. Представьте вы хотите заняться бизнесом и вам нужен сайт. Вася сделает вам сайт на WP и JQuery за 70к, а Петя за 300к на вп + реакт. Что вы выберете?
MRcracker, делать, как это сделали бы 99.99% разработчиков - JQuery или нативный JS. У ВП весь функционал на JQuery написан, юзайте его, не прогадаете. Если не знаете и не хотите учить JQuery - то чистый JS, все просто
MRcracker, где вы видели требования, в которых вам говорят, "запилите мне фронт на реакте, бэк на вп + SSR"? Если и существует пара извращенцев, это не значит, что это востребовано и обязательно нужно это знать.
Nikolay Petyukh, ну вы тут одно место с пальцем сравниваете, ваш хостер свой сервак держит на одном серваке, ваш аккаунт висит на другом серваке, отсюда и цифры разные. Вот если у вас на одном аккаунте несколько сайтов включая основной домен, и он отвечает быстро, значит возможно дело в том, каким способом реализован поддомен
У вас есть такая штука как страницы (Pages) они состоят из компонентов. Вот компонент, который содержится в main вы импортируете и для админки и для обычных страниц, а хедер и футер юзаете какой вам удобно. Все же элементарно
Владимир Голубь, я уже посмотрел примеры с сайта реакта и беру.ру, у первых стили в исходном коде, у вторых с подключаемыми файлами. Опять же ответ на вопрос - нет не влияет. Может повлиять только в том случае, если ваши стили будут настолько сильно тормозить загрузку сайта, что пользователи не будут ждать загрузки и уйдут с сайта. Сама причина влияния на SEO будет не именно в стилях, а в последствиях. Если скорость загрузки исходного кода будет быстрой - то хоть 100 тегов запихайте
Владимир Голубь, потому что вы хотите сделать сайт на Реакте, который должен иметь исходный код. Это называется Server-Side-Rendering. Так вот SSR берет из вашего бандла только ДОМ дерево с названиями классов и контент, который нужно вывести в исходный код. Другими словами - при серверном рендеринге стили не используются.
P.S. по крайней мере на проекте с которым я работаю используется Express, и с ним стили не выводим. Вот пример клик
Вот блок кода из функции submit:
Интерпретатор идет по коду сверху вниз и вот что происходит с вашим кодом:
1) Диспатч экшена в редакс
2) логирование текущего пропса
3) изменение стора редакс
4) т.к. изменяется стор, а компонент App слушает изменения стора в компоненте App, он перерисовывается и ререндерит компонент Register с новыми пропсами, и в нем уже логирование идет обновленного стора
Комментарии по коду:
1) Не именуйте файлы и функции redux с большой буквы. Функции с большой буквы в JS - это конструкторы. Используйте camelCase
2) Слушать редакс стор лучше в самом компоненте Register, а не в App. Т.к. App это вообще не нужно. При каждом изменении отслеживаемого свойства в сторе вы ререндерите и App и Register, а должен ререндерится только Register
3) mapDispatchToProps возвращает в итоге объект, поэтому можно использовать синтаксис проще:
a) Вариант 1 - просто вернуть объект
const mapDispatchToProps = { setName };b) В виде деструктуризации в качестве второго аргумента connect
connect(null, { setName });