反应同构和初始数据

Question

我创建一个反应和nodejs isomprphic店。 我的问题是如何用SERVER SIDE上的初始数据填充我的组件。 我知道如何使用初始数据填充我的主页组件，我在“/”路径中获取数据并将它们作为道具传递给我的组件。但其他路线呢？ 我可以定义多个服务器端路由，但我的网站不再是SPA。 如何才能得到反应路由器客户端路由和服务器端启动数据的好处？

Answer 1

REDX可以节省您一些时间做这样的事情。或者你可以在服务器上计算状态，并将其填充为状态存储应用程序的道具。

React路由器很容易同构，但你必须通过你的状态。

http://redux.js.org/

这index.jsx是我的榜样与反应路由器W/O终极版：

"use strict"; 
import React from 'react'; 
import { render } from 'react-dom'; 
import { match, Router, browserHistory } from 'react-router'; 

const injectTapEventPlugin = require('react-tap-event-plugin'); 
injectTapEventPlugin(); 

//for dev tools 
window.React = React; 

const routes = require('./Routes.jsx'); 

const history = browserHistory; 
match({history, routes}, (error, redirectLocation, renderProps) => { 
    render(<Router {...renderProps} />, document.getElementById('app')); 
}) 

和Routes.jsx你会发现这样的：

"use strict"; 
const React = require('react'); 
import { Router, Route, Link, IndexRoute } from 'react-router' 

const Layout = require("./components/Layout.jsx"); 
const Login = require("./components/Login.jsx"); 
const Home = require("./components/Home.jsx"); 
const NotFound = require("./components/NotFound.jsx"); 

const routes = (
    <Route path="/" component={Layout}> 
     <IndexRoute component={Home}/> 
     <Route path="login" component={Login}/> 
     <Route path="*" component={NotFound}/> 
    </Route> 
); 

module.exports = routes; 

Answer 2

我用服务器端的以下组件，用于具有react-router的SPA，传递位置prop以及ReactDOMServer.renderToString（）中的初始状态对象（）

裁判：React-Router Server Rendering docs

import React, { Component } from 'react'; 
import { createStore, combineReducers } from 'redux'; 
import { Provider } from 'react-redux'; 
import reducers from '../reducers'; 
import routes from '../routes'; 
import { match, RoutingContext } from 'react-router'; 

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    let reducer = combineReducers(reducers); 
    let store = createStore(reducer, this.props); 
    var component; 

    match({ routes, location: this.props.location }, function (error, redirectLocation, renderProps) { 
     if (error) { 
     component = <p>{error.message}</p>; 
     } else if (renderProps) { 
     component = <RoutingContext {...renderProps} />; 
     } else { 
     component = <p>404 not found</p>; 
     } 
    }) 

    return (
     <Provider store={store}> 
     {component} 
     </Provider> 
    ) 
    } 
} 

Answer 3

这是一个现实生活中的同构应用https://github.com/WebbyLab/itsquiz-wall与已经解决了所有这些问题。这里介绍

数据人口问题https://github.com/WebbyLab/itsquiz-wall/blob/master/server/app.js

这里是我的关于处理同构问题的博文 - "The Pain and the Joy of creating isomorphic apps in ReactJS"