Реактивная архитектура полного стека: при добавлении внешнего интерфейса реакции к приложению узла / экспресса какие аспекты обычно обрабатывают состояние реакции?

Question

У меня есть полностью построенное приложение для работы с узлами / экспрессами, на которое я хочу добавить реакцию, чтобы применить эти отношения в приложениях с полным стеком.Я раньше создавал приложения для реагирования и в узле, но никогда вместе, и я не понимаю, как реагирует вписывается в архитектуру MVC.

В приложении полного стека реактивного узла реагирует ли состояние, а затем обрабатывает все данные, которые я ранее передавал в мои ejs представления?

Я просматривал учебные пособия по приложениям с полным стеком с узлами и реакциями, но они, похоже, касаются только вопросов, например, как реагирует на выборку данных из серверной части или как настроить конфигурацию, но яполучить эту часть, я просто не понимаю, что реагирует, что в приложении с полным стеком, какая часть архитектуры модель-контроллер-представление приложения узла / экспресс-сервер реагирует на себя?Как распределяются обязанности между бэкэндом и внешним интерфейсом?

Так, например, я работаю с приложением типа reddit-clone, поэтому, когда вы нажимаете на заголовок сообщения, чтобы увидеть сообщение, которое мой контроллер запрашивает в базе данных для этого сообщения, а затем передает его представлению как {post}:

show(req, res, next){
        postQueries.getPost(req.params.id, (error, post) => {
            if(error || post == null){
                res.redirect(404, "/");
            } else {
                res.render("posts/show", {post});
            }
        });
    },

Итак, когда я добавлю интерфейс с реагировать, будет ли этот объект {post} обрабатываться с помощью реакции?Таким образом, реакция будет получать эти данные и использовать их в компоненте post для создания файла, который в данный момент является моим show.ejs?

Answer 1

Так что, когда я добавлю интерфейс с реагировать, будет ли этот {post} объект чем-то обрабатываться реагировать? Таким образом, реакция будет получать эти данные и использовать их в компоненте post для создания того, что в данный момент является моим файлом show.ejs для просмотра?

Да. show.ejs будет React view или page, который содержит component для обработки, как показать его.

Для упрощения:

React - это виртуальный DOM, поэтому он поменяет views / containers / components на и на основе events (например, нажатие кнопки), что, в свою очередь, приведет к: извлечению, отображать, манипулировать и / или отправлять данные в API. В разработке он полностью отделен от вашего бэк-энда. Вся маршрутизация будет обрабатываться внешним интерфейсным маршрутизатором. В работе весь интерфейсный код src скомпилирован в папку dist или build, которая содержит ваши ресурсы (изображения, шрифты, CSS) и, что наиболее важно, файл bundle.js, который затем обслуживаются экспресс .

Express + некоторая база данных - будет выступать в качестве вашего API, где он будет обрабатывать данные CRUD на основе запросов внешнего интерфейса. Если ваше приложение представляет собой MPA (многостраничное приложение), то обычной практикой является разграничение внутренних маршрутов от ваших внешних маршрутов с префиксом / api / . В производственном процессе, если Express не распознает маршрут (это не запрос /api/), он возвращается к файлу bundle.js переднего плана, где обрабатывается интерфейсом . маршрутизатор .

См. Рабочий пример здесь : https://github.com/mattcarlotta/fullstack-mern-kit (client - это внешний интерфейс, все остальное - это внутренний))

Или

См. Рабочий код и поле (где я делаю GET запрос к API , который возвращает json):

---

В приведенном выше примере ваш контроллер show будет просто отправлять JSON (или string сообщение) обратно во внешний интерфейс (перенаправление будет происходить на внешнем интерфейсе через маршрутизатор - например, react-router-dom):

show(req, res, next){
        postQueries.getPost(req.params.id, (error, post) => {
            if(error || post == null){
                // res.status(404).send("Unable to locate posts.");
                res.status(404).json({ err: Unable to locate posts });
            } else {
                res.status(200).json({ post });
            }
        });
    },

Вы можете даже упростить вышесказанное, используя async/await:

const show = async (req, res, done) => {
        try {
           const post = await postQueries.getPost(req.params.id);
           res.status(200).json({ post });
        } catch(err) {
           // res.status(404).send("Unable to locate posts.");
           res.status(404).json({ err: Unable to locate posts });
        }
    };

А затем интерфейс React обрабатывает ответ.