How can I transfer data from an express server to respond to submissions?

Question

I have a simple express server with an orientdb database connection. I need to convey information from an expression in order to respond to opinions. For example, in the expression I:

router.get('/', function(req, res, next) {
  Vertex.getFromClass('Post').then(
    function (posts) {
      res.render('index', { title: 'express' });
    }
  );
});

So, in this example, I need to have a variable in my component of the reaction component postsin order to set the state of the component. (I use the reaction only in the interface, not on the server side)

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  render() {
    return (
      <div>
        <Posts posts={posts} />
      </div>
    );
  }
}

How can I get messages in response from express?

I found that maybe I can execute an ajax request from the response, but I think this is not the best way.

If I need to receive these messages in real time, for example using socket.io, what are the differences?

PD: express - , , hogan. ?

!!!

Answer 1

, - - . , (, Redux), -

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    fetch('/') // or whatever URL you want
      .then((response) => response.json())
      .then((posts) => this.setState({
        posts: posts,
      });
  }

  render() {
    return (
      <div>
        <Posts posts={this.state.posts} />
      </div>
    );
  }
}

response JSON- .

render posts.

API- Fetch . MDN ( , polyfill ).

: socket.io - . -

class IndexPage extends React.Component {
  ...
  componentDidMount() {
    this.props.socket.on('postReceived', this.handleNewPost);
  }
  handleNewPost = (post) => {
    this.setState({
      posts: [
        ...this.state.posts,
        post,
      ],
    });
  }
  ...
}

, ., , Socket.io Chat.