reactjs – 如何在客户端和服务器端呈现逻辑上将react-router和r

我今天确实设置了完全相同的东西.我们已经拥有的是react-router和redux.我们模块化了一些模块,将东西注入其中 – 而中提琴 – 它起作用.我用 https://github.com/erikras/react-redux-universal-hot-example作为参考.

部分：

router.js

我们返回一个函数(位置,历史,存储)来使用promises设置路由器. routes是包含所有组件的react-router的路由定义.

module.exports = function (location,history,store) {
    return new Bluebird((resolve,reject)  => {
        Router.run(routes,location,(Handler,state) => {
            const HandlerConnected = connect(_.identity)(Handler);
            const component = (
                <Provider store={store}>
                    {() => <HandlerConnected />}
                </Provider>
            );
            resolve(component);
        }).catch(console.error.bind(console));
    });
};

2. store.js

您只需将初始状态传递给createStore(reducer,initialState).您只需在服务器和客户端上执行此操作.对于客户端,您应该通过脚本标记(即窗口.__ initialstate__)使状态可用.
有关更多信息,请参见http://rackt.github.io/redux/docs/recipes/ServerRendering.html.

3.在服务器上呈现

获取数据,使用该数据设置初始状态(…数据).上面的createRouter = router.js. res.render表示使用以下内容渲染玉石模板

script.
    window.csvistate.__initialstate__=!{initialState ? JSON.stringify(initialState) : 'null'};
...
#react-start
    != html

var initialState = { ...data };
var store = createStore(reducer,initialState);
createRouter(req.url,null,store).then(function (component) {
    var html = React.renderToString(component);
    res.render('community/neighbourhood',{ html: html,initialState: initialState });
});

4.适应客户

然后你的客户可以做同样的事情.位置可以是React-Router的HistoryLocation

const initialState = window.csvistate.__initialstate__;
const store = require('./store')(initialState);

router(location,store).then(component => {
    React.render(component,document.getElementsByClassName('jsx-community-bulletinboard')[0]);
});

回答你的问题：

>你的方法似乎是对的.我们也这样做.人们甚至可以将网址作为州的一部分.> redux商店内的所有州都是好事.这样你就有了一个单一的事实来源.>我们现在还在研究应该去哪里.目前我们在服务器上请求componentDidMount上的数据应该已经存在.