Geek Answers Handbook

React serialize component to send from server

I am working on a website that contains some kind of blog. I would like to write my personal blog posts as React components so that they can contain other components.

Blog posts are as follows and are in delimiter files.

export default {
  name: 'test',
  title: 'Test',
  description: 'Description todo …',
  featureUrl: '/img/articles/test.jpg',
  component: class extends React.Component{
    render() {
      return (
        <div>
          <p>Here goes the test article …</p>
          <p>Some more …</p>
          <p>Some more …</p>
          <p>Some more …</p>
        </div>
      );
    }
  }
};

The application supports server rendering. On the server, articles are uploaded to the Flux repository and may be displayed depending on the route: for example. blog list or individual blog post.

Then I want to send the Flux storage state to the client, which causes the object to serialize. Since functions cannot be serialized, the component is lost. On the client, I would like to get status from the server. But then I skip the component.

What is a good strategy to solve this problem?

Yahoo , , .

, , , , , , Flux.

import * as articles from 'articles';
(...)
let component = articles[articleName].component;

, . , . , .

?

Redux Flux.

+4
1

, .

, , ( ), Redux, .

Node.js Redux 1.0.0 ES6:

const initialState = {
  post: getBlogPostById(id); // or however you get your data
};

const reducer = combineReducers(reducers);
const store = createStore(reducer, initialState);

const stateString = JSON.stringify(initialState);

const appString = React.renderToString(
  <Provider store={store}>
    {() => <App/>}
  </Provider>
);

, , appString, stateString, , . Handlebars, ,

<body>
  <div id="app">{{{appString}}}</div>
  <script>window.INITIAL_STATE = {{{stateString}}}</script>
  <script src="/app.js"></script>
</body>

app.js - JS-, , stateString, Redux . , " " DOM, , . , JS- :

const reducer = combineReducers(reducers);
const store = createStore(reducer, window.INITIAL_STATE);

React.render(
  <Provider store={store}>
    {() => <App/>}
  </Provider>,
  document.getElementById('app')
);

, , , . React " ", - JSON. , YMMV, ...

0

More articles:


All Articles