Изучаю React по видеоурокам. До 35 урока все было просто и понятно.
Простой, тестовый, учебный проект. Всё работает.
Наверно, правильно написать вопросы автору видеокурса (сам наобучал, вот и отвечай), но курс всё же попробую написать сюда т.к. вопрос простой и по коду.
В учебном проекте, только что разобрались с пробросом props. Вынесли бизнес логику в файл state.js (аналог будущего редьюсера) и начали передавать функции в компоненты (колбеки).
Встала задача отрендерить проект вызовом функции. Для этого создали функцию observer (названа по одноименному паттерну и выполняет данную роль).
Вопрос такой - как в моем React проекте отображается (рендерится) сообщение? За счет чего?
Как сейчас работает данный механизм (колбеки и пробросы пропс понимаю)?
А конкретнее rerenderEntireTree (их две в state.js и в index.js).
PS
Кажется, что кода много, но половина это import и код очень простой (буквально 2-3 действия).
Файл state.js Аналог будущего редьюсера.
/* Заглушка - функция перерисовки. Для чего она тут непонятно. Но без неё не работает. Одноименная функция есть в index.js */
let rerenderEntireTree =()=>{
console.log('state changed');
}
/* Тут хранится вся информация, аналог редьюсера в учебном примере */
let state = {
/* Страница профиля - вот сюда и добавляются посты */
profilePage: {
/* Информация для сообщений - текст сообщений и лайки */
posts: [
{id: 1, message: "Пост 1", likesCount: 1},
{id: 2, message: "Пост 2", likesCount: 2}
],
newPostText : 'MynewPostText value',
},
/* Страница сообщений - это смотреть не нужно, вопрос не про это */
dialogsPage: {
/* Информация для сообщений в диалогах */
messages: [
{id: 1, message: "Сообщение 1"},
{id: 2, message: "Сообщение 2"},
{id: 3, message: "Сообщение 3"},
],
/* Информация для диалогов*/
dialogs: [
{id: 1, name: "Иван"},
{id: 2, name: "Петр"},
{id: 3, name: "Света"}
],
},
}
/* Основная функция добавления сообщения */
export let addPost = () =>{
let newPost ={
id:5,
message: state.profilePage.newPostText,
likesCount: 0,
}
state.profilePage.posts.push(newPost);
state.profilePage.newPostText='';
rerenderEntireTree(state); /* Вызов rerenderEntireTree - но какой (их две в разных файлах )и почему работает, когда выше она заглушка? */
}
export let updateNewPostText = (newText) =>{
state.profilePage.newPostText = newText;
rerenderEntireTree(state);
}
export const subscribe = (observer) => {
rerenderEntireTree = observer;
}
export default state;
Файл index.js
import App from './App';
import state, {subscribe} from "./redux/state";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {addPost, updateNewPostText} from './redux/state';
import {BrowserRouter} from "react-router-dom";
/* Ещё одна функция rerenderEntireTree, одноименная функция-заглушка есть в state.js */
let rerenderEntireTree =(state) =>
{
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App
state={state}
addPost={addPost}
updateNewPostText={updateNewPostText}
/>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
}
/* Зачем и когда это вызывается? Что тут ререндерится? */
rerenderEntireTree(state);
/* Зачем и когда это вызывается? Что тут ререндерится? */
subscribe(rerenderEntireTree);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Файл app.js
import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import Navbar from './components/Navbar/Navbar';
import Profile from './components/Profile/Profile';
import Dialogs from './components/Dialogs/Dialogs';
import {BrowserRouter, Route} from "react-router-dom";
import {addPost, updateNewPostText} from "./redux/state";
const App = (props) => {
return (
<div className="App">
<div className="wrapper">
<Header/>
<Navbar/>
<div className="app-wrapper-content">
<Route path="/dialogs" render={() => <Dialogs state={props.state.dialogsPage}
/>}/>
<Route path="/profile" render={() => <Profile profilePage={props.state.profilePage}
addPost={props.addPost}
updateNewPostText={props.updateNewPostText}
/>}/>
</div>
</div>
</div>
);
}
export default App;
Файл profile.js - тут и происходит добавление и отображение сообщений
import React from 'react';
import css from './Profile.module.css';
import MyPosts from './MyPosts/MyPosts';
/* Компонента отображающая информацию о профиле */
import ProfileInfo from './MyPosts/ProfileInfo/ProfileInfo';
import {addPost} from "../../redux/state";
const Profile = (props) => {
return (
<div>
<div className={css.Profile}>
<ProfileInfo/>
</div>
<MyPosts posts={props.profilePage.posts}
addPost={props.addPost}
newPostText={props.profilePage.newPostText}
updateNewPostText={props.updateNewPostText}
/>
</div>
);
}
export default Profile;
