Как в моем React проекте отображается (рендерится) сообщение?

Изучаю 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;
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы