服务端衬着react+mobx+webpack+express实战（同时也支撑客户端衬着）

现在绝大多数网站照样一个多页的构造，但实在一个网站已完全能够做成一个spa，比方youtube就是一个spa，近来公司项目都是采纳react+mobx服务端衬着的单页面运用的情势，踩了一些坑，有一些本身的体验，所以把项目抽了出来去掉了营业代码，留了一个架子分享一下。

项目github地点

现在react主流的状况治理运用的比较多的是redux，我司之前有个项目也是react+redux，从我个人运用下来的感觉来讲，关于绝大多数的前端运用场景，mobx远比redux更适宜，更简朴运用，更轻易上手。

结果

上岸，注册

增添item到列表中

假如路由中没有的页面，处置惩罚404

怎样运用

git clone git@github.com:L-x-C/isomorphic-react-with-mobx.git
cd isomorphic-react-with-mobx
npm install

Dev (客户端衬着)

npm start
open http://localhost:3000

Production (服务端衬着)

npm run server
open http://localhost:20000

一些经常会碰到的状况

怎样在服务端猎取数据?

在每一个component中增添一个onEnter,用一个promise来处置惩罚，在这个promise中提议一个action，转变mobx中的states值

@action
static onEnter({states, pathname, query, params}) {
return Promise.all([
menuActions.setTDK(states, '列表'),
jobActions.fetchJobList(states, query)
]);
}

之所以能这么做，是因为在serverRender中有一个onEnter的预处置惩罚，会依据component的嵌套从最外层一向遍历到最里层的onEnter，并实行个中的的要领

import async from 'async';
export default (renderProps, states) => {
const params = renderProps.params;
const query = renderProps.location.query;
const pathname = renderProps.location.pathname;
let OnEnterArr= renderProps.components.filter(c => c.onEnter);
return new Promise((resolve, reject) => {
async.eachOfSeries(onEnterArr, function(c, key, callback) {
let enterFn = c.onEnter({states, query, params, pathname});
if (enterFn) {
enterFn.then(res => {
if (res) {
//处置惩罚Promise回调实行，比方上岸
res.forEach((fn) => {
if (Object.prototype.toString.call(fn) === '[object Function]') {
fn();
}
});
}
if (key === (onEnterArr.length - 1)) {
resolve();
}
callback();
}).catch(err => {
reject(err);
});
} else {
callback();
}
});
});
};


怎样在服务端设置tdk(title, description, keywords)?

这实在在上一个题目中就已涌现了，onEnter中有一个setTDK(states, t, d, k)的要领，运用他就能够设置tdk的值

怎样在服务端举行跳转?

在浏览器环境中，我们能够设置window.location.href = url来举行跳转。
但是在服务器环境中，并没有window和document这2个对象，所以我们在服务器环境中抛出一个非常，然后捕获到以后举行302跳转。
细致能够看src/helpers/location.js, 中的redirect function
他会自动推断当前环境，来挑选运用哪种跳转

import {redirect} from './helpers/location';
@action
static onEnter({states, query, params}) {
redirect('http://www.xxx.com');
}

mobx的道理及运用就不在这里做细致的引见了，网上搜一搜有许多。
我置信我们所采纳的一些要领或许并非最圆满的解法，假如有更好的欢迎来github中提issue讨论交换，互相学习~项目地点在此