Backend API с React Router

Question

В настоящее время у меня есть экспресс-бэкэнд, который предоставляет пользователям страницу входа в систему, которая является частью приложения React.На странице приложения есть кнопка, которая направляет пользователей через процесс Google O-Auth, в конечном итоге возвращая информацию о пользователе, например:

router.get("/google/redirect", passport.authenticate('google'), (req,res) => { // Returns user information from google...
    res.redirect("/dashboard");
    // req.user <–– My user information is here...
});

В основном файле server.js моего приложения, у меня естьapp.get маршрут, ожидающий ниже промежуточного программного обеспечения для моей аутентификации, готовой к обслуживанию моего скомпилированного индекса React.js, здесь:

app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, "index.html"));
});

Этот маршрут GET обслуживает мой файл React.js, который содержит «public» и«частные» маршруты, основанные на моем состоянии Redux.Файл React (до того, как он скомпилирован в мой пакет index.html / javascript, обслуживаемый указанным выше маршрутом), до компиляции выглядит следующим образом:

const store = configureStore();
const jsx = (
  <Provider store={store}>
    <AppRouter />
  </Provider>
);
const renderApp = () => {
    ReactDOM.render(jsx, document.getElementById('app'));
    hasRendered = true;
};

renderApp();

Я хотел бы иметь возможность сделать следующее:каким-то образом «отправить» данные из моего бэкэнда Express в состояние Redux.Таким образом, когда пользователь входит в систему, состояние «isAuthenticated» Redux изменяется, а затем, когда я направляюсь на частный маршрут «/ dashboard».

Как я могу отправить эти данные MongoDB на мойСохранить Redux и затем перенаправить пользователя на соответствующую страницу (\dashboard)?Или есть лучший способ визуализации начального состояния React, чтобы я мог отобразить экран входа в систему, а затем, как только пользователь войдет в систему, перенаправить их и изменить состояние Redux из информации из бэкэнда?

Answer 1

Я вижу, что ваш главный вопрос, как вы можете извлечь данные из MongoDB в React, а затем изменить состояние.

Это будет сделано, как и любой другой запрос от Клиента -> Сервер.

Теперь то, как вы можете запрашивать данные из Mongodb, зависит от его реализации:

Если вы используете MongoDb в качестве пакета узла, такого как Mongoose, то вы бы позвонили из React -> ExpressСервер, который будет обслуживать данные из базы данных.

Запрос от React -> Express будет выглядеть примерно так:

Код реагирования:

 callAPI(){
    fetch("http://localhost:9000/testAPI")
      .then(res=>res.text())
      .then(res=> this.setState({apiResponse :res}))
      .catch(err=> err);
  }

 componentDidMount(){
    //this can be any event. This is just an example
    this.callAPI();
  }

И тогда Express должен сервер маршрутизировать / testAPI с данными, которыеВы ищете.

Экспресс testAPI.js

express = require('express');

router = express.Router();

router.get('/', function(req,res, next) {
    res.send('API is working perfectly.');
});

module.exports = router;

Дайте мне знать, если это отвечает на ваш вопрос.